Henry Peters Couto

Desenvolvimento de jogos em Python para a

educação

Araquari – SC

Setembro de 2020

Henry Peters Couto

Desenvolvimento de jogos em Python para a educação

Instituto Federal Catarinense – IFC

Câmpus Araquari

Bacharelado em Sistemas de Informação

Araquari – SC

Setembro de 2020

Henry Peters Couto

Desenvolvimento de jogos em Python para a educação/ Henry Peters Couto. –

Araquari – SC, Setembro de 2020-

– Instituto Federal Catarinense – IFC

Câmpus Araquari

Bacharelado em Sistemas de Informação, Setembro de 2020.

1. Jogos. 2. Python. 3. PySide2. 4. Designer. I. Instituto Federal Catarinense. II.

Câmpus Araquari. III.Desenvolvimento de jogos em Python para educação

“Um processo educacional adequado equilibra a motivação

e o prazer de aprender com uma organização

clara, método e normas que fazem sentido.”

(Andrea Ramal)

“A educação está sofrendo importantes mudanças

e a corrida pela implementação de processos

e ferramentas inovadoras já começou

e consequentemente, a experiência dos alunos

para com as instituições.”

(Gustavo Caetano, CEO da Sambatech e Samba Digital)

Resumo

O projeto tem como objetivo a criação de um tutorial de jogos em Python com Pyside2 e

QT Designer para a educação, sendo eles um jogo de memoria e outro de álgebra, que

foram bifurcados do TCC por ser muito longo.

Palavras-chave: Jogos. Arte. Python. PySide2. Designer.

Abstract

The project aims to create a Python game tutorial for education using Pyside2 and QT

Designer, being then a memory game and an algebra game, which were bifurcated from

the TCC for being too long.

Keywords: Jogos. Python. PySide2. Designer.

Lista de ilustrações

Figura 1 – Instalador do Python no Windows 10 ................... 20

Figura 2 – Criando o Main Windows ......................... 22

Figura 3 – Main Windows ............................... 23

Figura 4 – Removendo o menubar e statusbar .................... 23

Figura 5 – Criando a Label ............................... 24

Figura 6 –

Imagem escolhida para servir de fundo das cartas, produzida por (GOD-

THESUPREME, 2019) .......................... 25

Figura 7 –

Imagem escolhida para servir de referencia de objeto contendo H2O,

nesse caso uma garrafa de água, produzida por (FREEPIK, ) ..... 25

Figura 8 –

Imagem escolhida para servir de referencia de objeto contendo CO2,

nesse caso a fumaça da cidade industrial, produzida por (NASA, ) . . 26

Figura 9 –

Imagem escolhida para servir de referencia de objeto contendo FE2O3,

nesse caso um cano de ferro enferrujado, produzida por (VISENTINI,

2012) .................................... 26

Figura 10 –

Imagem escolhida para servir de referencia de objeto contendo NACL,

nesse caso um recipiente de sal de cozinha, produzida por (JUHELE,

2018) .................................... 26

Figura 11 –

Imagem escolhida para representar o conjunto molecular H2O, produzida

por (Clip Art Max, ) ........................... 27

Figura 12 –

Imagem escolhida para representar o conjunto molecular CO2, produzida

por (OXINOXI, 2019) ........................... 27

Figura 13 –

Imagem escolhida para representar o conjunto molecular FE2O3, pro-

duzida por (GRAFIKAZPAZUREM, 2018) ............... 27

Figura 14 –

Imagem escolhida para representar o conjunto molecular NACL, produ-

zida por (PETRROUDNY, 2020) ..................... 27

Figura 15 –

Imagem escolhida para servir de conhecimento sobre água, produzida

por (Nova Vida Filtros, ) ......................... 28

Figura 16 –

Imagem escolhida para servir de conhecimento sobre dióxido de carbono

, produzida por (ARVOREAGUA, 2020) ................. 28

Figura 17 –

Imagem escolhida para servir de conhecimento sobre ferrugem, produ-

zida por (Detetives do Cosmos, 2021) .................. 29

Figura 18 –

Imagem escolhida para servir de conhecimento sobre sal de cozinha,

produzida por (DIABETES, 2020) .................... 29

Figura 19 –

Navegador de recursos encontrado no canto inferior direito do Qt Designer

Figura 20 – Editor de Recursos ............................. 32

Figura 21 – Editor de Recursos preenchido corretamente ............... 33

Figura 22 – Deﬁnindo a imagem de fundo na label criada ............... 34

Figura 23 – Deﬁnindo o cursor como ponteiro ..................... 35

Figura 24 – Copiando duas labels ............................ 35

Figura 25 – Copiando quatro labels ........................... 36

Figura 26 – Criando a label e selecionando a mudança de texto com formatação . . 37

Figura 27 – Deﬁnindo o texto formatado da label ................... 37

Figura 28 – Visualização após sua criação ....................... 38

Figura 29 – Visualização da previa do aplicativo ................... 39

Figura 30 – Selecionando as labels para criar sua classe especial ........... 40

Figura 31 – Criando sua classe especial chamada clicklabel .............. 41

Figura 32 – Selecionando a classe especial para alterar seus sinais e receptores . . . 42

Figura 33 – Interface de alteração de sinais e receptores ............... 43

Figura 34 – Interface de alteração de sinais e receptores preenchida corretamente . 44

Figura 35 – Promovendo as labels de imagem para a classe clicklabel ........ 45

Figura 36 – Localização do editor de sinais e receptores ................ 46

Figura 37 –

Linkando o sinal click da clicklabel com o receptor agua da propria

clicklabel .................................. 47

Figura 38 – Visualização dos labels após criar todos os links ............. 47

Figura 39 – Minimizando a classe Ui_MainWindows no editor de textos Geany . . 59

Figura 40 – Visuzalição da execução do programa no geany e seu funcionamento . . 62

Figura 41 – Visualização do programa após mudança de fundo para agua ...... 64

Figura 42 – Selecionando a centralwidget para promove-la .............. 66

Figura 43 – Selecionando a classe especial novo_widget recém criada ........ 67

Figura 44 – Selecionando change signals\slots na clicklabel .............. 75

Figura 45 – Selecionando a função para deletar usando o sinal de menos ...... 76

Figura 46 –

Conﬁrmando as mudanças, após ter deletado todas as funções e criado

em sue lugar a função mudar_face .................... 77

Figura 47 – Selecionando todos os links ........................ 78

Figura 48 – Visualização dos links após deletar e recria-los como mudar_face . . . 79

Figura 49 – Criando nova widget ............................ 80

Figura 50 – Abrindo o stylesheet e selecionando mudança de plano de fundo . . . . 80

Figura 51 – Selecionando a cor do plano de fundo com o sistema RGB de cor . . . 81

Figura 52 –

Visualização da widget após setar sua cor para cinza com o rgb(170,170,170)

........................................ 82

Figura 53 – Selecionando a Widget para promove-la ................. 83

Figura 54 – Criando nova classe especial escondido .................. 84

Figura 55 – Criando novo sinal mudar_informativo para a classe escondido ..... 85

Figura 56 – Visualização da interface após mudar a widget escondido para o fundo 86

Figura 57 –

Criando os links entre o sinal click da clicklabels e o receptor mu-

dar_informativo da widget escondido ................... 87

Figura 58 –

Visualização dos links após criar os links entre a clicklabel e o widget

escondido .................................. 88

Figura 59 – Criação de uma label comum com uma imagem de informativo ..... 88

Figura 60 – Criação de botão .............................. 89

Figura 61 –

Alteração da cor do botão para branco com o rgb(240,240,240) utilizando

o stylesheet após ter mudado seu texto para continuar ......... 90

Figura 62 – Habilitando a visualização dos sinais e receptores herdados da QWidget 91

Figura 63 –

Criação do link entre o sinal clicked do botão e o recptor hide da widget

escondido que fora herdado do QWidget ................. 92

Figura 64 –

Visualização dos links da interface, juntamente com a aba de sinais e

receptores .................................. 92

Figura 65 –

Visualização do erro de importação do QWidget após removido as linhas

de import ..................................105

Figura 66 –

Visualização do erro de importação do QLabel após removido as linhas

de import e adicionado o import do QWidget ..............105

Figura 67 –

Interface do jogo da memoria funcionando após três combinações corretas

117

Figura 68 – Interface do jogo da memoria após combinar as cartas de CO2 . . . . . 118

Figura 69 – Interface do jogo da memoria após vencer o jogo .............119

Figura 70 –

Imagem de abelha escolhida para substituir a variável X da equação de

algebra linear, produzida por (VECTEEZY, a) .............120

Figura 71 –

Imagem de abelha escolhida para substituir a variável Y da equação de

algebra linear, produzida por (VECTEEZY, b) .............121

Figura 72 –

Imagem de abelha escolhida para substituir a variável Z da equação de

algebra linear, produzida por (STOCKIO, ) ...............121

Figura 73 –

Imagem de play escolhida para adicionar a tela do vídeo, produzida

por (JOHN, 2019) .............................121

Figura 74 –

Imagem de abertura do vídeo, produzida por (Geoﬀrey Kater; Agro

Bayer Brasil, 2018) ............................122

Figura 75 – Editor de recursos preenchido corretamente ...............123

Figura 76 – Deﬁnindo o texto formatado de explicação do jogo ...........125

Figura 77 –

Criando label com a imagem de abelha com fundo transparente, e

selecionando o reset para recarregar as imagens .............126

Figura 78 –

Label com a imagem de abelha com fundo branco após recarregar as

imagens ...................................126

Figura 79 – Copiando labels em conjunto para fazer sua copia ............127

Figura 80 – Interface com todas as labels em seus devidos lugares ..........127

Figura 81 – Selecionando para remover a imagem e seu conteúdo escalado . . . . . 128

Figura 82 – Selecionando para formatar o texto da label ...............129

Figura 83 –

Formatação do número 2 para a label, seguindo o padrão centralizado,

negrito e fonte 48 ..............................129

Figura 84 –

Visualização da interface após mudar o primeiro valor de abelha para o

número 2 ..................................130

Figura 85 –

Selecionando as posições do Y para mudar de abelha para a imagem de

ﬂor ......................................130

Figura 86 – Visualização após mudar as imagens para ﬂor ..............131

Figura 87 –

Visualização após mudar as imagens faltantes para o número 2, conforme

feito anteriormente na ﬁgura 84 ......................132

Figura 88 –

Selecionando as posições de igualdade, após remover a imagem e seu

conteúdo escalado, juntamente com a seleção de sua formatação de texto

133

Figura 89 –

Formatação do sinal de igualdade, seguindo o padrão centralizado,

negrito e fonte 48 ..............................133

Figura 90 –

Visualização após mudar as imagens de abelha para o sinal de igualdade

134

Figura 91 – Visualização após mudar as imagens de abelha para o sinal de menos . 135

Figura 92 – Visualização após mudar as imagens de abelha para a imagem de mel . 136

Figura 93 – Visualização após mudar as imagens de abelha para o sinal de positivo 137

Figura 94 – Visualização após mudar as imagens de abelha para o número 1 . . . . 138

Figura 95 – Visualização após mudar as imagens de abelha para o número 7 . . . . 139

Figura 96 – Visualização após mudar as imagens de abelha para o número 3 . . . . 140

Figura 97 –

Visualização após mudar as imagens de abelha para o sinal de multiplicação

141

Figura 98 – Criando o Line Edit ............................142

Figura 99 –

Ajustando o tamanho do Line Edit para o tamanho da imagem de abelha

143

Figura 100 – Selecionando o Line Edit para mudar seu estilo .............143

Figura 101 – Selecionando para adicionar uma nova fonte ...............144

Figura 102 – Deﬁnindo a nova fonte com arial, black, tamanho 40 ..........144

Figura 103 – Visualização do editor de estilos após adicionar a nova fonte ......145

Figura 104 – Copiando a Line Edit para as outras posições de abelha ........145

Figura 105 – Selecionando todas os Line Edit ......................146

Figura 106 – Visualização da interface após mudar todos os Line Edit para o fundo . 146

Figura 107 – Selecionando manualmente cada imagem de abelha e as deletando . . . 147

Figura 108 – Visualização da interface após arrumar os Line Edit ...........147

Figura 109 –

Visualização da interface após recarregar as imagens, fazendo as imagens

de abelha ﬁcarem com fundo transparente ................149

Figura 110 – Promovendo centralwidget para widget_principal ............149

Figura 111 – Criando botão ................................150

Figura 112 –

Mudando texto e estilo de fonte do botão para Veriﬁcar com fonte arial,

black, tamanho 40 .............................150

Figura 113 – Selecionando o Line Edit para mudar seu nome .............151

Figura 114 – Selecionando a aba de sinais e receptores do canto inferior direito . . . 152

Figura 115 –

Selecionando a criação de novo sinal na aba de sinais e receptores do

canto inferior direito ............................152

Figura 116 –

Visualização da barra de tamanho do texto na aba de sinal e receptores,

com tamanho pequeno ...........................153

Figura 117 –

Selecionando o botão veriﬁcar, como quem envia após estender o tama-

nho do texto, tornando-o visível ......................154

Figura 118 – Selecionando o sinal clicked() do botão veriﬁcar .............155

Figura 119 – Selecionando a widget_principal, como quem vai receber o sinal . . . . 156

Figura 120 – Selecionando o receptor veriﬁcar() da widget_principal .........157

Figura 121 –

Visualização da aba de sinais e receptores, após fazer a criação do link

entre o botão veriﬁcar e a widget_principal ...............158

Figura 122 –

Criação da widget, e deﬁnindo sua cor para cinza com o rgb(170,170,170)

159

Figura 123 – Selecionando a widget para promove-la para escondido .........159

Figura 124 – Adicionando os sinais da widget escondido ................160

Figura 125 –

Copiado a botão veriﬁcar para a widget escondido e selecionado a edição

de estilo do botão, removido seu conteúdo, para recria-lo ........161

Figura 126 – Adicionado plano de fundo para o botão .................161

Figura 127 – Adicionando uma fonte para o botão sendo arial, black, tamanho 40 . . 162

Figura 128 –

Visualização do estilo do botão com duas linhas, sendo cor de fundo e

fonte .....................................162

Figura 129 –

Visualização do estilo do botão com cor de fundo e fonte, em uma única

linha .....................................163

Figura 130 – Criando a barra de rolagem para o vídeo .................164

Figura 131 – Criando label e deﬁnindo sua imagem como play ............165

Figura 132 –

Visualização da interface da widget_escondida, após criação da label

com a imagem do play ...........................165

Figura 133 –

Visualização da interface da widget escondido, após mudar a cor de

fundo da label com a imagem do play para preto rgb(0,0,0) ......166

Figura 134 –

Selecionando a label da imagem do play, para promove-la para clicklabel

167

Figura 135 – Adicionando o sinal click(), para a classe especial clicklabel .......167

Figura 136 – Selecionando a barra de rolagem, para promove-la para media_slider . 168

Figura 137 –

Adicionando os receptores duration_changed() e position_changed(),

para a classe especial media_slider ....................168

Figura 138 –

Visualização da interface após mudar o nome do botão de veriﬁcar para

fechar ....................................169

Figura 139 – Criando widget e deﬁnindo sua cor de fundo para preto rgb(0,0,0) . . . 170

Figura 140 – Promovendo a nova widget para a classe especial video .........170

Figura 141 – Adicionando o sinal click() para a classe especial video .........171

Figura 142 – Selecionando a widget video, para move-la para o fundo ........171

Figura 143 –

Visualização da interface após mover a widget video para o fundo,

tornando o label de play visível ......................172

Figura 144 –

Criando link entre o sinal click() da label do play e o receptor play_video()

da widget escondido ............................173

Figura 145 –

Criando link entre o sinal click() da widget video e o receptor play_video()

da widget escondido ............................173

Figura 146 –

Criando link entre o sinal sliderMoved() da barra de rolagem me-

dia_slider e o receptor set_position() da widget escondido .......174

Figura 147 –

Criando link entre o sinal clicked() do botão fechar e o receptor close()

da MainWindow, que precisa ser herdado do QWidget .........174

Figura 148 –

Criando link entre o sinal clicked() do botão fechar e o receptor close()

da MainWindow, após habilitar a visualização dos sinais e receptores

da QWidget .................................175

Figura 149 –

Criando novo aplicativo, com uma label e selecionando para criar um

texto formatado ...............................190

Figura 150 –

Deﬁnindo o texto formatado a ser usado na caixa de mensagem, com

sua formatação centralizada com tamanho 20 nas duas primeiras li-

nhas, pontuação em negrito e sua terceira linha inteira em negrito com

tamanho 28 .................................190

Figura 151 – Copiando o código HTML, gerado pela formatação do texto ......191

Figura 152 – Visualização do jogo ﬁnalizado ......................198

Figura 153 –

Visualização das respostas corretas em verde e desabilitadas, e a resposta

errada em vermelho .............................198

Figura 154 –

Visualização da mensagem após responder todos os três valores correta-

mente ....................................199

Figura 155 –

Visualização da interface com o vídeo antes de clicar com o mousse para

começar a tocar ...............................199

Figura 156 – Visualização do vídeo em andamento ...................200

Lista de tabelas

Tabela 1 – Formula de álgebra linear a ser usada, com sua quantidade de casas . . 124

Tabela 2 – Resolução da primeira linha da formula .................124

Tabela 3 – Resolução da segunda linha da formula ..................124

Tabela 4 – Resolução da terceira linha da formula ..................124

Lista de códigos

Código 1 – Comando utilizado para atualizar o pip para a ultima versão disponível 20

Código 2 – Comando utilizado para instalar o PySide2 na ultima versão disponível 21

Código

3 –

Comando utilizado para instalar o Qt Designer na ultima versão disponível

Código

4 –

Comando utilizado para instalar o PyInstaller na ultima versão disponível

Código 5 – Comando utilizado para veriﬁcar o local da pasta do Python ...... 21

Código

6 –

Comando utilizado para converter arquivos .qrc para .py, nesse caso

converter unico.qrc para recursos.py ........................ 48

Código

7 –

Comando utilizado para converter arquivos .ui para .py, nesse caso

converter interface.ui para interface.py ...................... 48

Código 8 – Código unico.qrc criado no QT Designer ................. 48

Código

9 –

Código interface.ui abreviado por ser grande que fora criado no QT

Designer ....................................... 49

Código

10 –

Código abreviado por ser muito grande que fora gerado ao converter as

imagens do unico.qrc em linguagem do Python, após execução do comando 6 50

Código

11 –

Código gerado ao converter o interface.ui em linguagem do Python,

após execução do comando 7 ........................... 51

Código 12 – Criando os importes generalizado para o aplicativo ........... 53

Código 13 – Abrindo o código da interface para copiar sua classe .......... 54

Código 14 – O código aplicativo.py após fazer copiar a classe da interface ...... 56

Código 15 – Criação da clicklabel, MainWindows e seu inicializa-dor ........ 60

Código 16 – Alteração da função do receptor agua para trocar sua imagem ..... 62

Código 17 – Criação da classe novo_widget ...................... 67

Código

18 –

Alteração da função do receptor agua para fazer suas comparações com

as cartas viradas, para veriﬁcar se é uma combinação .............. 68

Código 19 – Novo importes com time e random .................... 72

Código 20 – Adicionando uma lista para o novo_widget ............... 72

Código 21 – Alterando o inicializador do clicklabel para torna-lo aleatório ..... 72

Código

22 –

Nova classe Ui_MainWindow gerada pelas mudanças da interface, com

comentário da parte a ser prestado atenção .................... 94

Código

23 –

Classe clicklabel arrumado com a utilização dos self e com uma única

função mudar_face ................................. 97

Código

24 –

Criação da classe escondido, deﬁnindo sua inicialização oculta e alteração

da função de colorir, conforme encontrado em (USER7797, 2013), alteração

da função de esconder, e criação do receptor mudar_informativo ........101

Código 25 – Alteração dos importes generalizados para apenas os necessários . . . . 105

Código 26 – Código completo do jogo da memoria ..................106

Código

27 –

Comando utilizado para converter o arquivo aplicativo.py em um

executável individual ................................119

Código

28 –

Comando utilizado paraconverter arquivos .qrc para .py, nesse caso

converter recursos.qrc para recursos.py ......................175

Código

29 –

Comando utilizado para converter arquivos .ui para .py, nesse caso

converter interface.ui para interface.py ......................175

Código 30 – Criando os importes generalizados para o aplicativo ...........176

Código 31 – Criando função de correção do caminho para arquivos externos . . . . 176

Código 32 – Código da classe Ui_MainWindow criada no QT Designer .......177

Código 33 – Criando classe especial valores, e a classe especial clicklabel ......184

Código

34 –

Criando a classe especial widget_principal, onde se faz as veriﬁcações

se os valores estão corretos .............................186

Código

35 –

Código HTML gerado, na aba de text após conﬁrmar a formatação do

texto no QT Designer, conforme imagem 151 ...................191

Código 36 – Código 35, após realizar a indentação das linhas ............191

Código 37 – Linha 75 do código 34 a ser mudada pelo código 35 ...........192

Código

38 –

Visualização de como deve ﬁcar a linha 75 do código 34 após ter seu

conteúdo mudado pelo código 35 .........................192

Código

39 –

Criando a classe especial escondido, Criando em seu inicializa-dor o

tocador de vídeo e deﬁnindo que não é visível, Criando a função de repintar,

criando as funções play_video, mediastate_changed e set_position . . . . . . 193

Código

40 –

Criando as classes media_slider e video, fazendo o link entre eles e o

video player encontrado na widget escondido ...................195

Código 41 – Python ...................................197

Código

42 –

Cópia dos importes encontrados no jogo da memoria no código 25,

removendo os importes não necessários, sendo eles QEventLoop e QTimer do

PySide2.QtCore e o QCursor do PySide2.QtGui .................200

Código 43 – Alteração dos importes generalizados para apenas os necessários . . . . 201

Código 44 – Código completo do jogo de álgebra linear ................201

Código

45 –

Comando utilizado para converter o arquivo aplicativo.py em um

executável individual ................................216

Lista de abreviaturas e siglas

PhD Doctor of Philosophy

IFC Instituto Federal Catarinense

IFC-CA Instituto Federal Catarinense Campus Araquari

H2O Monóxido de di-hidrogênio, água

NaCl Cloreto de sódio, sal de cozinha

CO2 Dióxido de carbono, fumaça

Fe2O3 Óxido de ferro, ferrugem

H Hidrogénio

O Oxigénio

qrc Qt Resource System

py Python Script

ui User Interface

TCC Trabalho de conclusão do curso

Sumário

1 INTRODUÇÃO ............................. 18

2 DESENVOLVIMENTO DOS JOGOS ................. 19

2.1 Instalação de programas .......................... 19

2.1.0.1 Comandos ................................... 20

2.1.1 Arrumando o Python ............................. 21

2.2 Desenvolvimento do jogo da memoria .................. 21

2.2.1 Arrumando a MainWindows ......................... 22

2.2.2 Criação da Label ............................... 23

2.2.3 Imagens a serem utilizadas no jogo da memoria ............... 24

2.2.3.1 Imagem de Fundo da Carta .......................... 25

2.2.3.2 Imagens de matéria .............................. 25

2.2.3.3 Imagens de molécula .............................. 27

2.2.3.4 Imagens de conhecimento ........................... 28

2.2.4 Criação do repositório de imagens ...................... 30

2.2.5 Criando as labels de imagem e texto ..................... 33

2.2.6 Conﬁgurando as labels ............................ 39

2.2.7 Arrumando os sinais e receptores ....................... 45

2.2.8 Criando o primeiro código aplicativo.py ................... 48

2.2.8.1 Comandos de conversão ............................ 48

2.2.8.2 Códigos gerados pelo QT Designer ....................... 48

2.2.8.3 Códigos gerados após a utilização dos comandos de conversão ......... 50

2.2.8.4 Criando os importes e copiando a interface convertida para o aplicativo.py ... 53

2.2.8.5 Criando a clicklabel juntamente com a conﬁguração do aplicativo ........ 59

2.2.8.6 Alterando a função do receptor para trocar a imagem da carta ......... 62

2.2.8.7 Alterando a função do receptor para fazer as comparações ........... 64

2.2.9 Criando o segundo código aplicativo.py ................... 71

2.2.10 Finalizando a interface ............................ 74

2.2.10.1 Criação da nova widget escondido ....................... 79

2.2.10.2 Criação dos links e a label da widget escondido ................. 85

2.2.10.3 Criação de botão na widget escondido e a criação do link entre eles ....... 89

2.2.11 Criando o terceiro e ultimo código aplicativo.py ............... 93

2.2.12 Arrumando últimos detalhes para criação do executável ...........103

2.3 Desenvolvimento do jogo de álgebra linear ...............119

2.3.1 Vídeo e imagens a serem utilizadas no jogo de álgebra linear ........120

2.3.2 Criando o repositório recursos.qrc ......................122

2.3.3

Criação da label de informativo do jogo, e deﬁnindo a equação matemática

a ser utilizada .................................123

2.3.4 Criando as labels de imagem e texto para as formulas de álgebra linear ...125

2.3.5 Mudando as imagens de abelha para seus respectivos valores ........128

2.3.5.1 Mudando de abelha para ﬂor ..........................130

2.3.5.2 Mudando de abelha para o número 2 ......................131

2.3.5.3 Mudando de abelha para o sinal de igualdade ..................132

2.3.5.4 Mudando de abelha para o sinal de negativo ..................134

2.3.5.5 Mudando de abelha para a imagem de mel ...................135

2.3.5.6 Mudando de abelha para o sinal de positivo ..................136

2.3.5.7 Mudando de abelha para o número 1 ......................137

2.3.5.8 Mudando de abelha para o número 7 ......................138

2.3.5.9 Mudando de abelha para o número 3 ......................139

2.3.5.10 Mudando de abelha para o sinal de multiplicação ................140

2.3.6 Criação dos QLine Edit ............................141

2.3.7 Arrumando os componente da interface, label, botão, e Line Edit ......148

2.3.8 Criando link manualmente entre o botão veriﬁcar e a widget_principal ...151

2.3.9 Criando a widget escondido .........................158

2.3.10 Criação dos componentes da widget_escondida ...............160

2.3.10.1 Criação do botão da widget_escondida .....................160

2.3.10.2 Criação da barra de rolagem da widget_escondida ...............163

2.3.10.3 Criação da label play, para o tocador de vídeo da widget_escondida .......164

2.3.11

Promovendo os componentes da widget_escondida e mudando o nome da

botão .....................................166

2.3.11.1 Promovendo a label da imagem do play para uma clicklabel ...........166

2.3.11.2 Promovendo a barra de rolagem para media_slider ...............167

2.3.11.3 Mudando o texto do botão para Fechar .....................169

2.3.12 Criação da widget para tocar vídeo ......................169

2.3.13 Criação dos links da widget_escondida ....................172

2.3.14 convertendo os arquivos ...........................175

2.3.15 Criando os importes para o aplicativo.py ...................175

2.3.16 Criando a função de conversor de caminho ..................176

2.3.17 Copiando a interface convertida para o aplicativo.py .............177

2.3.17.1 Criando as classes valores e clicklabel ......................184

2.3.18 Criando a classe widget_principal ......................185

2.3.18.1 Criando o texto formatado ...........................189

2.3.18.2 Arrumando o msgBox.setText() para o texto formatado .............191

2.3.19 Criando as classes especiais ..........................192

2.3.20 Criando a classe escondido ..........................192

2.3.21 Criando as classes media_slider e video ...................195

2.3.22 Criando o MainWindows e a inicialização do programa ...........197

2.3.23 Visualização do jogo de álgebra linear funcionando .............197

2.3.24 Arrumando últimos detalhes para criação do executável ...........200

2.3.25 Criação do executável individual .......................216

2.4 Conclusão do capitulo 2. .........................217

3 CONCLUSÃO ..............................218

REFERÊNCIAS .............................219

1 Introdução

Este projeto foi criado por ventura do TCC ter ﬁcado muito extenso, separando

o tutorial de criação dos jogos nesse projeto, o projeto inicial se veriﬁcava a necessidade

visual dos alunos, por mais variadas causas, desde desinteresse, até mesmo diﬁculdade de

aprender. Para muitas pessoas aprender é algo entediante e desinteressante, ou muitas vezes

difícil, por mais que estude não consegue entender o assunto e logo o acaba esquecendo,

fazendo com que desistam dos estudos ou apenas estudar no ultimo dia apenas para passar

numa prova, pois acredita que não vai conseguir aprender, uma das alternativas pesquisada

por estudiosos fora a utilização de jogos digitais para educação, sendo presente seus estudos

desde individuais que usaram seu estudo para o PhD como o (FROSI,2010) até estudo

das academias de Washington em parceria como o (HONEY; HILTON,2011), além de ter

presente em jornais académicos como em (ZIRAWAGA; OLUSANYA; MADUKU,2017),

nesse projeto vamos explorar mais essa alternativa com a criação de jogos educacionais,

servindo como base e exemplo de criação de jogos educacionais, para o desenvolvimento do

jogo fora preciso escolher uma linguagem de programação a qual fora escolhida a linguagem

de programação mais utilizada no IFC-CA o Python para este projeto juntamente com a

utilização da interface gráﬁca Pyside2.

No capitulo 2se encontra o desenvolvimento passo a passo de como criar um jogo

de memoria de elementos químicos e um jogo de álgebra linear, onde se encontra imagens

no lugar das variáveis, ambos os jogos tem seu código fonte comentado linha a linha, junto

com os materiais utilizados de apoio durante o desenvolvimento dos jogos, mostrando

desde a criação da interface, parte a parte com imagens para apoio, e seu código criado

em partes, explicando e mostrando sua criação, tendo no primeiro jogo criado, sua criação

parcial, sem funcionamento pleno, para observação de como está ﬁcando o desenvolvimento,

e adicionando novos mecanismos, como por exemplo criando primeiro a aplicação com a

imagem ﬁxa, e depois mudando para que possa mudar a imagem, no capitulo 3se encontra

a conclusão do projeto, dando suas considerações ﬁnais sobre o projeto junto com os

resultados e as diﬁculdades encontradas.

2 Desenvolvimento dos jogos

Nesse capitulo vamos criar passo a passo o jogo da memoria, e o jogo de álgebra,

começando com a instalação e conﬁguração do Python, juntamente com a instalação

do PySide2, Qt Designer, PyInstaller e o editor de textos Geany, depois para melhor

entendimento de como utilizar o Qt Designer, vamos explicar separadamente por subsecções

de como fazer juntamente com uma ou mais imagens, sendo que algumas das imagens

vão apresentar uma seta preta para maior comodidade visual dos locais indicados, no

desenvolvimento além de criar a interface no Qt Designer vamos ter que criar os códigos

em Python, para criar a aplicação, interfaces mais simples, podem ser criadas somente

com o Qt Designer, no caso dos jogos que vamos criar é necessário fazer algumas parte

em Python manualmente, tendo todos os códigos comentados linha por linha, e com uma

breve descrição antes dos códigos.

2.1 Instalação de programas

Nessa secção vamos arrumar o computador para começar o desenvolvimento dos

jogos educacionais, fazendo a instalação e conﬁguração dos componentes necessários, sendo

necessário seguir uma ordem para começar as instalações, começando pela instalação do

Python, que é disponível para varias plataformas diferentes, encontrado no site (ROSSUM,

1991), sua instalação é simples, no Windows tem que apenas selecionar para adicionar o

Python ao Path conforme a imagem 1, após instalar o Python, é recomendado instalar um

editor de texto que suporte Python, para facilitar sua execução, e veriﬁcação durante o

desenvolvimento, por preferência do desenvolvente do projeto, foi escolhido o Geany, que se

encontra no site (GEANY,2005), por não haver necessidade de gerenciamento de pastas ou

outras utilidades, sua instalação também é simples, sem precisar especiﬁcar nada, contanto

que tenha adicionado o Python no Path ao instalar o Python, o Geany já vai se conﬁgurar

automaticamente para funcionar com o Python, tendo já instalado o Python e o Geany,

tem que instalar o PySide 2 e QT Design, que são executados no terminal, no caso do linux

normalmente se utiliza Ctrl + Alt + T, e para ativar o modo administrativo se escreve

‘sudo su’ no terminal, e no windows é utilizado Windows+R, para abrir uma pesquisa e

depois escrito ‘cmd’ na pesquisa, ao apertar Enter se abre o terminal no modo usuário, caso

seja necessário se utiliza Ctrl+Shift+Enter, ao invés de apenas Enter, para abrir o terminal

no modo administrativo, outra maneira é apenas escrever ‘cmd’ na barra de pesquisar do

Windows, a instalação dos programas é simples, sendo uma vez aberto o terminal executar

os comandos de instalação, sendo eles os comandos 1,2,3e4, lembrando da importância

de seguir a sequencia deﬁnida, para que já ﬁque tudo conﬁgurado e funcionando, pois em

Capítulo 2. Desenvolvimento dos jogos 20

sua maioria é conﬁgurado baseado no qual já fora instalado, mudar sua sequencia pode vir

a causar problemas futuros, começando pela atualização do pip, que é o comando 1usado

para instalar funções para o Python, próximo é o comando 2usado para instalação do

PySide2 o qual foi selecionado para o desenvolvimento do projeto, seu repositório pip pode

ser encontrado em (PYPI,b), seguindo com o comando 3usado para a instalação do Qt

Designer, que apesar do nome estar escrito PyQt5, sua utilização é a mesma para PySide2

como já foi veriﬁcado anteriormente sua semelhança entre eles, e o QT Design veriﬁca qual

a versão do aplicativo, já se adequando para o PySide2 ou PyQt5 dependendo de qual

se encontra instalado, tendo seu repositório pip em (PYPI,a), com esses três comandos

instalamos os utilitários para começar a desenvolver os jogos, mas vamos aproveitar e

instalar o PyInstaller usando o comando 4sendo ele um conversor de códigos em Python

para executáveis, que pode ser usado para Windows, GNU/Linux, Mac OS X, FreeBSD,

Solaris e AIX, sua criação de executáveis não tem dependência de ter Python instalado

na máquina que vai executa-los, possuindo dois tipos separados de criação de executável,

primeiro tipo é um pasta de arquivos com o executável, o segundo tipo é um executável

autónomo, sem nenhum outro arquivo junto, qual vai ser o foco do desenvolvimento, mais

informações sobre o Pyinstaller podem ser encontrados no site oﬁcial em (Py Installer,

2005), uma vez instalado tudo é necessário arrumar alguns detalhes na pasta do Python,

sendo encontrado na sub-subsecção 2.1.1.

Figura 1 – Instalador do Python no Windows 10

2.1.0.1 Comandos

1pip install −−upgrade pip

Código 1 – Comando utilizado para atualizar o pip para a ultima versão disponível

Capítulo 2. Desenvolvimento dos jogos 21

1pip i n s t a l l PySide2

Código 2 – Comando utilizado para instalar o PySide2 na ultima versão disponível

1pip i n s t a l l PyQt5Designer

Código 3 – Comando utilizado para instalar o Qt Designer na ultima versão disponível

1pip i n s t a l l p y i n s t a l l e r

Código 4 – Comando utilizado para instalar o PyInstaller na ultima versão disponível

1python −c"import sys ; print(sys.executable)"

Código 5 – Comando utilizado para veriﬁcar o local da pasta do Python

2.1.1 Arrumando o Python

Nessa sub-subsecção vamos arrumar os arquivos da pasta do Python, que já foi

instalado utilizando o comando 5para achar o local da pasta do Python, após se ter

o local da pasta pode ser feito um atalho, sendo da pasta especíﬁca, ou apenas para o

executável do designer, que se encontra na pasta Scripts, dentro da pasta do Python.

porém não é necessário, ao abrir o terminal e escrever ‘designer’, ele vai abrir o QT Design,

a criação do link é apenas para agilizar o processo. Para a utilização do PySide2 no

windows é necessário copiar um arquivo chamado ‘shiboken2.abi3.dll’ dentro da pasta

‘

Lib

site-packages

shiboken2’ para a pasta do PySide2, encontrado dentro do python na

pasta ‘

Lib

site-packages

PySide2’, todos os pacotes instalados no python se encontram

no ‘

Lib

site-packages

’, o shiboken2 é instalado quando se instala o PySide2, lembrando

que o arquivo ‘shiboken2.abi3.dll’ deve estar contido em ambas as pastas do shiboken2 e

PySide2 para funcionar, por isso deve se copiar apenas, tendo feito isso o Python vai estar

pronto para ser utilizado.

2.2 Desenvolvimento do jogo da memoria

Na secção anterior foi instalado e conﬁgurado os componentes necessários para a

criação dos jogos educacionais, nessa sessão vamos criar o jogo da memoria, do começo ao

ﬁm, criando seu executável individual usando o PyInstaller, começando o desenvolvimento

do jogo de memória em Python utilizando PySide2 com QT Design, devemos lembrar

que no desenvolvimento devemos evitar nomes com acentuação ou espaçamentos, no caso

de espaçamento utilizar ‘_’ em seu lugar, pois pode acarretar erros, caso seja utilizado

acentuação ou espaçamentos, abrindo o Qt Designer, sendo pelo atalho criado na sub-

subsecção 2.1.1 ou pelo terminal digitando ‘designer’, ao abrir ele vai mostrar algumas

Capítulo 2. Desenvolvimento dos jogos 22

opções de tela, como vamos criar um novo, escolhemos o Main Windows, conforme pode

ser observado na ﬁgura 2.

Figura 2 – Criando o Main Windows

2.2.1 Arrumando a MainWindows

Nessa subsecção vamos arrumar o MainWindows, ao criar o MainWindows, ele vem

com um tamanho padrão com barra e status, conforme pode ser observado na ﬁgura 3,

para mudar o tamanho, se pode mudar pela geometria no editor de propriedades, que

se encontra na parte com texto amarelo, ou redimensionar usando o mouse, acima do

editor de propriedades, encontramos o inspetor de objetos, que mostra os objetos que

possuem na aplicação atual, e com um sistema cascata para identiﬁcar, qual objeto está

dentro, sua hierarquia, que nesse caso podemos encontrar o menubar e statusbar, que não

seram utilizados, portanto apertando com o botão direito do mouse, podemos veriﬁcar as

possíveis ações a utilizar com o objeto especíﬁco, nesse caso vamos remover ambos, ﬁcando

conforme a ﬁgura 4.

Capítulo 2. Desenvolvimento dos jogos 23

Figura 3 – Main Windows

Figura 4 – Removendo o menubar e statusbar

2.2.2 Criação da Label

Na subsecção anterior removemos o menubar e statusbar da MainWindows, nessa

subsecção vamos começar a fazer sua aparência, o qual terás oito imagens, que serviram

como cartas para o jogo de memória, para adicionar as imagens usaremos labels do Qt

Capítulo 2. Desenvolvimento dos jogos 24

Designer, que se encontra no lado esquerdo da tela, chamado Widget Box, puxando a barra

de rolagem para baixo podemos observar o setor de Display Widgets, onde se encontra a

Label, ou apenas apertando nas setas dos outros setores, para minimizar sua visualização,

ao encontrar a label, clicar com o mouse e arrastar para a tela e soltala, para colocar

na aplicação, depois redimensionar seu tamanho com o mouse, para isso utiliza-se os

pontilhados como base, e removemos seu texto, por seu objetivo ser utilizar a label para

adicionar imagens, tendo três maneiras de se mudar, clicar duas vezes na label, segunda

maneira é utilizar o botão direito do mouse na label, e apertar change plain text, que

permite editar seu texto e a terceira maneira é utilizar o editor de propriedades, que

possui uma barra de rolagem, como no Widget Box, que podemos minimizar os setores

de objeto, para chegar nas propriedades do QLabel, e alterar o campo text, para melhor

entendimento conﬁra a ﬁgura 5.

Figura 5 – Criando a Label

2.2.3 Imagens a serem utilizadas no jogo da memoria

Na subsecção anterior criamos uma label quadrada, sem texto, para poder adicionar

as imagens, nessa subsecção vamos pegar às imagens que utilizaremos no projeto, sendo

de autoria própria ou disponível na internet, nesse projeto, todas as imagens, foram

selecionadas da internet, considerando que muitas das imagens tem direitos autorais e

deve se pagar para o seu criador caso queira utilizar suas imagens com propósito comercial,

como o projeto não tem propósito comercial, foi possível baixar gratuitamente, e algumas

imagens são de livre comercialização, outras são parcialmente livre, que contém o nome

do site, onde se foi pego a imagem, e caso queira uma imagem limpa precisa pagar, das

Capítulo 2. Desenvolvimento dos jogos 25

imagens que precisaremos no projeto, considerando sua utilização no formato .png, para

evitar problemas, sendo uma imagem para servir de fundo da carta(sub-subsecção 2.2.3.1),

e quatro imagens para matéria(sub-subsecção 2.2.3.2), molécula(sub-subsecção 2.2.3.3)

e informativo(sub-subsecção 2.2.3.4), sendo todas sobre o mesmo elemento, sendo eles

H2O(monóxido de di-hidrogênio, água), NaCl(cloreto de sódio, sal de cozinha), CO2(dióxido

de carbono, fumaça) e Fe2O3(óxido de ferro, ferrugem).

2.2.3.1 Imagem de Fundo da Carta

Figura 6 –

Imagem escolhida para servir de fundo das cartas, produzida por (GOD-

THESUPREME,2019)

2.2.3.2 Imagens de matéria

Figura 7 –

Imagem escolhida para servir de referencia de objeto contendo H2O, nesse caso

uma garrafa de água, produzida por (FREEPIK, )

Capítulo 2. Desenvolvimento dos jogos 26

Figura 8 –

Imagem escolhida para servir de referencia de objeto contendo CO2, nesse caso

a fumaça da cidade industrial, produzida por (NASA, )

Figura 9 –

Imagem escolhida para servir de referencia de objeto contendo FE2O3, nesse

caso um cano de ferro enferrujado, produzida por (VISENTINI,2012)

Figura 10 –

Imagem escolhida para servir de referencia de objeto contendo NACL, nesse

caso um recipiente de sal de cozinha, produzida por (JUHELE,2018)

Capítulo 2. Desenvolvimento dos jogos 27

2.2.3.3 Imagens de molécula

Figura 11 –

Imagem escolhida para representar o conjunto molecular H2O, produzida

por (Clip Art Max, )

Figura 12 –

Imagem escolhida para representar o conjunto molecular CO2, produzida

por (OXINOXI,2019)

Figura 13 –

Imagem escolhida para representar o conjunto molecular FE2O3, produzida

por (GRAFIKAZPAZUREM,2018)

Figura 14 –

Imagem escolhida para representar o conjunto molecular NACL, produzida

por (PETRROUDNY,2020)

Capítulo 2. Desenvolvimento dos jogos 28

2.2.3.4 Imagens de conhecimento

Figura 15 –

Imagem escolhida para servir de conhecimento sobre água, produzida por (Nova

Vida Filtros, )

Figura 16 –

Imagem escolhida para servir de conhecimento sobre dióxido de carbono ,

produzida por (ARVOREAGUA,2020)

Capítulo 2. Desenvolvimento dos jogos 29

Figura 17 –

Imagem escolhida para servir de conhecimento sobre ferrugem, produzida

por (Detetives do Cosmos,2021)

Figura 18 –

Imagem escolhida para servir de conhecimento sobre sal de cozinha, produzida

por (DIABETES,2020)

Capítulo 2. Desenvolvimento dos jogos 30

2.2.4 Criação do repositório de imagens

Na subsecção anterior selecionamos as imagens a serem utilizadas no jogo da

memoria, nessa subsecção vamos adicionar elas a um arquivo .qrc(Qt Resource System),

para sua utilização dentro do próprio QT Design, para adicionar temos que abrir o editor

de recursos, que se encontra no navegador de recursos, em baixo do editor de propriedades,

onde possui três abas, a já pré-selecionada navegador de recursos, uma aba de editor de

ações, e uma de editor de sinais e receptores(Signal/Slot), que utilizaremos mais para frente,

por enquanto vamos adicionar às imagens para o programa, utilizando o lápis encontrado

na aba de navegador de recursos, conforme pode ser observado na ﬁgura 19, ao clicar no

lápis, vai abrir o editor de recursos, que pode ser movido ou redimensionado utilizando

o mouse, tendo os seis botões, conforme pode ser observado na ﬁgura 20, sendo eles da

esquerda para direita, criar um novo repositório .qrc (vai perguntar onde criar o arquivo),

abrir um repositório .qrc, e excluir um repositório .qrc carregado, e os outros três já são de

edição do conteúdo do repositório, sendo criar um preﬁxo, como uma pasta onde ﬁcaram os

arquivos, obrigatório sua criação, proximo botão é adicionar arquivos, imagens, texto, entre

outros, e o último botão é para remover um arquivo ou preﬁxo. No editor de recursos vamos

criar um repositório .qrc, podendo ser qualquer nome desejado, não tem interferência na

aplicação, nesse caso vamos chamar de unico(lembrando em evitar a acentuação), e criar

quatro preﬁxos, onde seu nome inﬂuencia na aplicação, vamos nomeálos respectivamente

imagens para colocar a imagem de fundo referente a sub-subsecção 2.2.3.1, e outras imagens

caso tenha vontade, informativo para colocar as imagens sobre informações referente a

sub-subsecção 2.2.3.4, materia para colocar as imagens das matérias referente a sub-

subsecção 2.2.3.2, como a garrafa de água e por ﬁm molecula para colocar as imagens das

composições moleculares referente a sub-subsecção 2.2.3.3, após já ter criado eles, somente

selecionar qual preﬁxo deseja adicionar a imagem, e apertar para adicionar arquivos, sendo

às imagens, referenciadas acima, seu local onde elas estão armazenadas, não inﬂuenciam

na aplicação, mas para organização, fora criado uma pasta, memorise, para armazenar

os arquivos do jogo de memória, como o repositório unico.qrc, e dentro dela uma pasta

chamada imagem, para deixar a imagem de fundo, e três pastas especíﬁcas dentro, sendo

elas conhecimento, matéria e molécula, onde coloquei cada imagem baixado em sua pasta

especíﬁca, lembrando o local das imagens não inﬂuenciam no aplicativo, porém uma vez

colocado no repositório .qrc, ele sempre vai procurar o arquivo no mesmo local, caso delete,

mude o nome, mova, faça alguma coisa com a imagem, vai precisar, entre no editor de

recursos, remover o arquivo editado e re-inserir o arquivo, após colocar todos os arquivos

dentro dos preﬁxo certos, tem que adicionar um apelido para às imagens, algo muito

importante, quando for colocar o apelido, utilizar o mesmo apelido para os elementos

certos, como a imagem do informativo de CO2, a imagem da fumaça, e a imagem da

molécula CO2, colocar todos esses três com o mesmo apelido, que nesse caso foi escolhido

fumaca, para o NaCl foi escolhido sal, para H2O foi água, para Fe2O3 foi ferrugem e para

Capítulo 2. Desenvolvimento dos jogos 31

o fundo, escolhemos fundo_carta(lembrando de utilizar ‘_’ no lugar de espaçamento), ao

criar todos, da maneira certa, pode se conﬁrmar clicando em ok, completando a criação

do repositório .qrc chamado unico que será utilizado na criação do aplicativo, podendo

veriﬁcar e comparar com a ﬁgura 21, onde está preenchido da maneira correta.

Figura 19 – Navegador de recursos encontrado no canto inferior direito do Qt Designer

Capítulo 2. Desenvolvimento dos jogos 32

Figura 20 – Editor de Recursos

Capítulo 2. Desenvolvimento dos jogos 33

Figura 21 – Editor de Recursos preenchido corretamente

2.2.5 Criando as labels de imagem e texto

Na subsecção anterior foi criado o repositório de imagens unico.qrc, nessa subsecção

vamos adicionar a imagem na label criada, para isso vamos nas propriedades da QLabel,

encontrada na esquerda no editor de propriedades, onde vai estar as propriedades do

QObject,QWidget,QFrame e por ﬁm o QLabel, podendo minimizar eles, deixando apenas

o QLabel, dento das propriedades do QLabel se encontra a opção pixmap, que é utilizado

para adicionar uma imagem para a label, clicando nela ela vai pedir para selecionar uma

imagem do recursos, que foi criado na subsecção anterior, selecionando o preﬁxo imagens,

e a imagem de fundo_carta, e conﬁrmar com o botão OK, foi escolhido fundo_carta,

pois serás a face mostrada, e apenas após clicar na carta, vai mostrar o outro lado da

carta podendo conter uma imagem de matéria ou molécula, ao conﬁrmar a imagem vai ser

carregada na label, porém vai ﬁcar fora de proporção, para isso seleciona-se a opção embaixo

de pixmap, scaledContents, para fazer a imagem ﬁcar do tamanho da label conforme pode

ser observado na ﬁgura 22, ao criar a label com o tamanho desejado já com a imagem,

vamos voltar nas propriedades e maximizar a propriedades do QWidget, para mudar o tipo

de cursor para pointing hand conforme pode ser observado na ﬁgura 23, depois de arrumar

Capítulo 2. Desenvolvimento dos jogos 34

a label com a imagem e com o cursor, vamos selecionar a label e copiar ela, sendo possível

de varias maneiras, utilizando o botão direito na label presente na tela ou no inspetor de

objetos, onde removemos o statusbar e menubar, outra maneira, mais prática e fácil, é

selecionar a label na tela e utilizar o atalho Ctrl + C para copiar e Ctrl + V para colar a

cópia, podendo clicar e arrastar o mouse para fazer seleções múltiplas, ao copiar e colar a

primeira label tem que alinhar a distância entre elas e sua posição, agora pode selecionar

ambas para copiar e colar conforme a ﬁgura 24, assim ﬁcando com quatro cartas, alinhar

elas novamente, e depois copiar a linha inteira de quatro para colocar em baixo, conforme

a ﬁgura 25, ﬁcando com as oito cartas do jogo, agora vamos criar uma label em cima das

cartas para escrever a explicação sobre o jogo, preferencialmente fazer a label do tamanho

da tela, e ajustar o tamanho da tela, o texto a ser escrito será ‘Jogo da memória: Combine

as cartas de estrutura molecular com os materiais correspondentes’, para escolher um

formato especial de texto, utilizamos o botão direito na label, e escolhemos, Change rich

text..., conforme a ﬁgura 26, que vai permitir editar o texto como no word, docs, entre

outros, porém com funções simples para texto, deixando a primeira linha escrito "Jogo

da memória: "sem as aspas, em negrito com tamanho 12 e centralizado, a segunda linha

também em negrito centralizado, porém com a letra um pouco menor, mudando para

tamanho 10, e escrevendo "Combine as cartas de estrutura molecular com os materiais

correspondentes "sem as aspas, ﬁcando conforme a ﬁgura 27,com a interface básica pronta

conforme a ﬁgura 28, podemos observar como vai ﬁcar a aplicação indo na aba Form no

canto esquerdo superior do QT Design, e selecionar Preview. . . , ou utilizando o atalho

Ctrl + R, conforme pode ser observado na ﬁgura 29.

Figura 22 – Deﬁnindo a imagem de fundo na label criada

Capítulo 2. Desenvolvimento dos jogos 35

Figura 23 – Deﬁnindo o cursor como ponteiro

Figura 24 – Copiando duas labels

Capítulo 2. Desenvolvimento dos jogos 36

Figura 25 – Copiando quatro labels

Capítulo 2. Desenvolvimento dos jogos 37

Figura 26 – Criando a label e selecionando a mudança de texto com formatação

Figura 27 – Deﬁnindo o texto formatado da label

Capítulo 2. Desenvolvimento dos jogos 38

Figura 28 – Visualização após sua criação

Capítulo 2. Desenvolvimento dos jogos 39

Figura 29 – Visualização da previa do aplicativo

2.2.6 Conﬁgurando as labels

Na subsecção anterior criamos oito labels com a imagem de fundo, juntamente com

uma label de texto em cima das cartas explicando sobre o jogo, nessa subsecção vamos

começar a criar a função de trocar a face das cartas, atualmente para aprendizado, vamos

criar a função de cada carta separada, como serão funções novas, vamos promover às labels

de imagens para outro tipo, criando uma widget personalizada, podendo encontrar em

varios sites de como fazer, por exemplo (HARIS,2015;BOY,2017;K.,2018;PYTHON,

a;T.,2018;CUNHA,2017), selecionando uma label ou todas as labels com a imagem

de fundo e apertando com o botão direito do mouse em uma das labels com imagem

e selecionando Promote to . . . , conforme pode ser observado na ﬁgura 30, ao abrir ele

vai aparecer uma janela, das widgets promovidas, nesse caso, em cima mostrando às

existentes, e embaixo qual vai ser criada, por padrão a classe básica já vai ser o objeto que

foi selecionado, nesse caso a QLabel, então só é necessário escolher o nome, escolhendo o

nome clicklabel, pois vai ser uma label clicável, para ao clicar nela, ela mude de face, o

header já se auto nomeia baseado no nome escolhido, após escrito só apertar para adicionar,

conforme pode ser observado na ﬁgura 31, assim que adicionado, ela vai para lista na

parte superior, ao estar criado vamos apertar com o botão direito do mouse para editar os

sinais e receptores(Change signals

slots), para poder adicionar às novas funções a label

especial clicklabel, conforme pode ser observado na ﬁgura 32, no editor de receptores e

sinais que se abre ao selecionar para editar os sinais e recptores, podendo ser visualizado na

ﬁgura 33, se seleciona o sinal de mais para criar uma nova função para os receptores(Slots)

Capítulo 2. Desenvolvimento dos jogos 40

ou sinais(Signals) e o sinal de menos para remover uma função criada, sendo os sinais

funções que mandam sinais, e os receptores funções que recebem sinais, nesse caso vamos

criar a função click() como sinal, sendo que toda função deve ser instanciada com o nome

e um parênteses vazio, ou com algum parâmetro que vai ser passado, como nós quais

já existem, e também vamos criar às funções do receptor, que vão ser acionadas depois

de receber o sinal da função click(), sendo as funções do receptor agua(), ferrugem(),

fumaca(), sal(), CO2(), FE2O3(), H2O e NACL(), ao preencher corretamente deve ﬁcar

conforme a ﬁgura 34, ao criar todas as funções dos sinais e receptores, só precisa conﬁrmar

apertando o OK, agora pode fechar a janela de promoted Widgets, e utilizar o mouse

para selecionar todas as labels de carta e apertar com o botão direito do mouse em umas

das labels selecionadas, para mudar todas ao mesmo tempo, selecionando promote to >

clicklabel, conforme pode ser observado na ﬁgura 35.

Figura 30 – Selecionando as labels para criar sua classe especial

Capítulo 2. Desenvolvimento dos jogos 41

Figura 31 – Criando sua classe especial chamada clicklabel

Capítulo 2. Desenvolvimento dos jogos 42

Figura 32 – Selecionando a classe especial para alterar seus sinais e receptores

Capítulo 2. Desenvolvimento dos jogos 43

Figura 33 – Interface de alteração de sinais e receptores

Capítulo 2. Desenvolvimento dos jogos 44

Figura 34 – Interface de alteração de sinais e receptores preenchida corretamente

Capítulo 2. Desenvolvimento dos jogos 45

Figura 35 – Promovendo as labels de imagem para a classe clicklabel

2.2.7 Arrumando os sinais e receptores

Na subsecção anterior foi criado a classe especial clicklabel e suas funções de sinal

e receptor, e após criado foi promovido todas às labels de carta para clicklabel, nessa

subsecção vamos adicionar às ações do aplicativo, mudando da aba de editor de widgets

para aba de editor de sinais e receptores, que se encontra na parte superior esquerda do

QT Design, embaixo da aba Window, ao lado do editor de Widgets, conforme pode ser

oberservado na ﬁgura 36, durante o desenvolvimento do jogo vai ser necessário mudar

entre as abas do editor de widgets e editor de sinais e receptores algumas vezes, tendo

selecionado o editor de sinais e receptores, se clica no objeto que vai emitir o sinal, criando

uma seta vermelha e leva até o objeto com o receptor que vai receber o sinal, nesse caso

vai ser da label da carta até ela mesma, com o comando de sinal click(), e receptor agua(),

conforme pode ser observado na ﬁgura 37, e fazendo isso para cada uma das labels de carta,

mantendo o mesmo sinal click, e colocando um receptor diferente, que vai conter outra face

de carta, ao completar de linkar todas as labels com elas mesmas, o aplicativo deve estar

parecido com a ﬁgura 38, tendo como sinal click() em todos, e conectado com a própria

Capítulo 2. Desenvolvimento dos jogos 46

label, com seus receptores diferentes para cada uma das labels, para mais informações

sobre o modo esse modo de edição pode ser observado na documentação do QT em (QT,

n).

Figura 36 – Localização do editor de sinais e receptores

Capítulo 2. Desenvolvimento dos jogos 47

Figura 37 –

Linkando o sinal click da clicklabel com o receptor agua da propria clicklabel

Figura 38 – Visualização dos labels após criar todos os links

Capítulo 2. Desenvolvimento dos jogos 48

2.2.8 Criando o primeiro código aplicativo.py

Na subsecção anterior criamos os links entre o sinal click() e o receptor para mudar

de face para cada uma das labels de carta, que mais para frente vamos juntá-las na mesma

função de mudar_face, nessa subsecção vamos começar a criar o código em Python para

fazer o aplicativo funcionar, para isso vamos salvar a aplicação criada no Qt Design, num

arquivo chamado interface.ui dentro da pasta memorise, e agora vamos na pasta memorise

criar um arquivo chamado aplicativo.py(Python Script), e utilizaremos o terminal para

executar alguns comandos, primeiramente após abrir o terminal tem que utilizar o comando

’ cd ‘, sem as aspas até o local da pasta memorise, sendo um exemplo para windows, caso

tenha sido criado a pasta memorise dentro de documentos, cd Documents(caso o sistema

seja em inglês) ou cd Documentos(caso o sistema seja em portugues) e cd memorise, para

entrar na pasta, ou cd Documents

memorise, fazer um comando por vez, ou escrever

o caminho utilizando a barra tem o mesmo resultado, uma vez dentro da pasta vamos

converter o unico.qrc para recursos.py, utilizando o comando 6e depois vamos converter a

interface.ui para interface.py, utilizando o comando 7, tendo convertido ambos os arquivos,

para python vamos abrir o aplicativo.py com o geany, para começar a criar o aplicativo.py.

2.2.8.1 Comandos de conversão

Nessa sub-subsecção se encontra os códigos de conversão 6e7.

1pyside2−r c c u n ic o . q rc −o r e c u r s o s . py

Código 6 –

Comando utilizado para converter arquivos .qrc para .py, nesse caso converter

unico.qrc para recursos.py

1pyside2−u ic i n t e r f a c e . ui > i n t e r f a c e . py

Código 7 –

Comando utilizado para converter arquivos .ui para .py, nesse caso converter

interface.ui para interface.py

2.2.8.2 Códigos gerados pelo QT Designer

Na sub-subsecção anterior se encontra os códigos de conversão 6e7, nessa sub-

subsecção temos os códigos gerados pelo Qt Designer, antes de serem convertidos para

arquivos em Python.

1<RCC>

2<q r e s o u r c e p r e f i x=" imagens ">

3< f i l e a l i a s="fundo_carta">imagem/ fundo_carta . png</ f i l e>

4</ q r e s o u r c e>

5<q r e s o u r c e p r e f i x="informativo">

6< f i l e a l i a s="fumaca">imagem/ conhecimento /CO2_arvore . png</ f i l e>

7< f i l e a l i a s="ferrugem">imagem/ conhecimento / ferrugem_marte . png</ f i l e>

Capítulo 2. Desenvolvimento dos jogos 49

8< f i l e a l i a s="sal ">imagem/ conhecimento / q ua nt id ad e_s al . png</ f i l e>

9< f i l e a l i a s="agua">imagem/ conhecimento / agua_ajuda . png</ f i l e>

10 </ q r e s o u r c e>

11 <q r e s o u r c e p r e f i x="materia">

12 < f i l e a l i a s="ferrugem">imagem/ materia / fer rugem . png</ f i l e>

13 < f i l e a l i a s="fumaca">imagem/ mater i a /fumaca . png</ f i l e>

14 < f i l e a l i a s="sal ">imagem/ mate r ia / s a l . png</ f i l e>

15 < f i l e a l i a s="agua">imagem/ m ateria / agua . png</ f i l e>

16 </ q r e s o u r c e>

17 <q r e s o u r c e p r e f i x="molecula ">

18 < f i l e a l i a s="fumaca">imagem/ mol e cula /CO2. png</ f i l e>

19 < f i l e a l i a s="ferrugem">imagem/ molecu l a /FE2O3 . png</ f i l e>

20 < f i l e a l i a s="sal ">imagem/ molec u la /NACL. png</ f i l e>

21 < f i l e a l i a s="agua">imagem/ molecula /H2O. png</ f i l e>

22 </ q r e s o u r c e>

23 </RCC>

Código 8 – Código unico.qrc criado no QT Designer

1<?xml v e r s i o n="1.0 " encoding="UTF -8" ?>

2

3<c l a s s>MainWindow</ c l a s s>

4<widget c l a s s="QMainWindow" name="MainWindow">

5

6<r e c t>

7<x>0</x>

8<y>0</y>

9<width>561</ width>

10 <h e i g h t>546</ h e i g h t>

11 </ r e c t>

12 </property>

13

14 <s t r i n g>MainWindow</ s t r i n g>

15 </property>

16

17 f a l s e</ bool>

18 </property>

19 <widget c l a s s="QWidget" name="centralwidget">

20 . . .

21 </ widget>

22 <customwidgets>

23 <customwidget>

24 <c l a s s>c l i c k l a b e l</ c l a s s>

25 <extends>QLabel</ e x t e n d s>

26 <hea der>c l i c k l a b e l . h</ header>

27 <slots>

28 <s i g n a l>c l i c k ( )</ s i g n a l>

29 <s l o t>mudar_face ( )</ s l o t>

Capítulo 2. Desenvolvimento dos jogos 50

30 <s l o t>agua ( )</ s l o t>

31 <s l o t>ferru gem ( )</ s l o t>

32 <s l o t>fumaca ( )</ s l o t>

33 <s l o t>s a l ( )</ s l o t>

34 <s l o t>CO2( )</ s l o t>

35 <s l o t>FE2O3( )</ s l o t>

36 <s l o t>s l o t 2 ( )</ s l o t>

37 <s l o t>H2O( )</ s l o t>

38 <s l o t>NACL( )</ s l o t>

39 </ s l o t s>

40 </customwidget>

41 </customwidgets>

42 <resources>

43

44 </resources>

45 <connections>

46 . . .

47 </connections>

48 </ ui>

Código 9 –

Código interface.ui abreviado por ser grande que fora criado no QT Designer

2.2.8.3 Códigos gerados após a utilização dos comandos de conversão

Na sub-subsecção anterior se encontra os códigos gerados pelo Qt Designer, antes

de serem convertidos para arquivos em Python, nessa sub-subsecção temos os arquivos em

Python após utilizar os comandos de conversão 6e7.

1# Reso urce o b j e c t code ( Python 3)

2# Creat ed by : o b j e c t co de

3# Created by : The Resource Compiler f o r Qt v e r si o n 5 . 1 5 . 2

4# WARNING! All changes made in t h i s f i l e w i l l be l o s t !

6from PySide2 import QtCore

8qt_resource_data = b"\có digo de quase 190 mil linhas "

10 de f qInitResources () :

11 QtCore . qRegisterResourceData (0 x03 , qt_resour c e _ s t r u c t , qt_resource_name

, qt_resource_data )

13 de f q CleanupR esou rces ( ) :

14 QtCore . q Un r e g i s t e r R e s o u r c e D a t a (0 x03 , qt_resource_s t r u c t ,

qt_resource_name , qt_resource_data )

16 qInitResources ()

Capítulo 2. Desenvolvimento dos jogos 51

Código 10 –

Código abreviado por ser muito grande que fora gerado ao converter as

imagens do unico.qrc em linguagem do Python, após execução do comando 6

1#−∗− coding : u t f −8−∗−

3#######################################################################

4## Form gen e r ated from r ead i ng UI f i l e ’ i n t e r f a c e . u i ’

5##

6## Created by : Qt User I n t e r f a c e Compiler v e rs i o n 5 . 1 5 . 2

7##

8## WARNING! A l l ch ang es made i n t h i s f i l e w i l l be l o s t when r e c o m p i l i n g UI

file !

9#######################################################################

11 from PySide2 . QtCore import ∗

12 from PySide2 . QtGui import ∗

13 from PySide2 . QtWidgets import ∗

15 from clicklabel import clicklabel

17 import unico_rc

19 class Ui_MainWindow( object) :

20 de f s etupUi ( s e l f , MainWindow ) :

21 i f not MainWindow . objectName ( ) :

22 MainWindow . setObjectName ( u"MainWindow")

23 MainWindow . r e s i z e ( 5 61 , 546)

24 MainWindow . setAutoFillBackground ( F als e )

25 s e l f . c e n t r a l w i d g e t = QWidget (MainWindow )

26 s e l f . c e n t r a l w i d g e t . setObjectName ( u" centralwidget " )

27 s e l f . l abe l_ 2 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

28 s e l f . l a b e l _ 2 . setObjectName (u" label_2 " )

29 s e l f . l a b e l _ 2 . setGeometry (QRect (10 , 90 , 121 , 211) )

30 s e l f . l a b e l _2 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

31 s e l f . l a b e l _ 2 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

32 s e l f . l a b el_2 . s e t S c a l e d C o n t e n t s ( True )

33 s e l f . l abe l_ 3 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

34 s e l f . l a b e l _ 3 . setObjectName (u" label_3 " )

35 s e l f . l a b e l _ 3 . setGeometry (QRect (150 , 90 , 121 , 211) )

36 s e l f . l a b e l _3 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

37 s e l f . l a b e l _ 3 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

38 s e l f . l a b el_3 . s e t S c a l e d C o n t e n t s ( True )

39 s e l f . l abe l_ 5 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

40 s e l f . l a b e l _ 5 . setObjectName (u" label_5 " )

41 s e l f . l a b e l _ 5 . setGeometry (QRect (430 , 90 , 121 , 211) )

42 s e l f . l a b e l _5 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

Capítulo 2. Desenvolvimento dos jogos 52

43 s e l f . l a b e l _ 5 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

44 s e l f . l a b el_5 . s e t S c a l e d C o n t e n t s ( True )

45 s e l f . l abe l_ 6 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

46 s e l f . l a b e l _ 6 . setObjectName (u" label_6 " )

47 s e l f . l a b e l _ 6 . setGeometry (QRect (10 , 320 , 121 , 211) )

48 s e l f . l a b e l _6 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

49 s e l f . l a b e l _ 6 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

50 s e l f . l a b el_6 . s e t S c a l e d C o n t e n t s ( True )

51 s e l f . l abe l_ 7 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

52 s e l f . l a b e l _ 7 . setObjectName (u" label_7 " )

53 s e l f . l a b e l _ 7 . setGeometry (QRect (150 , 320 , 121 , 211) )

54 s e l f . l a b e l _7 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

55 s e l f . l a b e l _ 7 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

56 s e l f . l a b el_7 . s e t S c a l e d C o n t e n t s ( True )

57 s e l f . l abe l_ 8 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

58 s e l f . l a b e l _ 8 . setObjectName (u" label_8 " )

59 s e l f . l a b e l _ 8 . setGeometry (QRect (290 , 320 , 121 , 211) )

60 s e l f . l a b e l _8 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

61 s e l f . l a b e l _ 8 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

62 s e l f . l a b el_8 . s e t S c a l e d C o n t e n t s ( True )

63 s e l f . l abe l_ 9 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

64 s e l f . l a b e l _ 9 . setObjectName (u" label_9 " )

65 s e l f . l a b e l _ 9 . setGeometry (QRect (430 , 320 , 121 , 211) )

66 s e l f . l a b e l _9 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

67 s e l f . l a b e l _ 9 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

68 s e l f . l a b el_9 . s e t S c a l e d C o n t e n t s ( True )

69 s e l f . l abe l_ 4 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

70 s e l f . l a b e l _ 4 . setObjectName (u" label_4 " )

71 s e l f . l a b e l _ 4 . setGeometry (QRect (290 , 90 , 121 , 211) )

72 s e l f . l a b e l _4 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

73 s e l f . l a b e l _ 4 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

74 s e l f . l a b el_4 . s e t S c a l e d C o n t e n t s ( True )

75 s e l f . l a b e l = QLabel ( s e l f . c e n t r a l w i d g e t )

76 s e l f . l a b e l . setObjectName ( u"label" )

77 s e l f . l a b e l . setGeometry ( QRect ( 10 , 10 , 541 , 6 1) )

78 s e l f . l a b e l . setTextFormat (Qt . AutoText )

79 s e l f . l a b e l . setWordWrap ( F a lse )

80 s e l f . l a b e l . s e t T e x t I n t e r a c t i o n F l a g s ( Qt . N oT ex tI nt er ac tio n )

81 MainWindow . s et Ce nt ralWidget ( s e l f . c e n t r a l w i d g e t )

83 s e l f . r e t r a n s l a t e U i (MainWindow )

84 s e l f . l a b e l _ 2 . c l i c k . connect ( s e l f . la b e l _ 2 . agua )

85 s e l f . l a b e l _ 3 . c l i c k . connect ( s e l f . la b e l _ 3 . ferrugem )

86 s e l f . la b e l _ 4 . c l i c k . connect ( s e l f . la b e l _ 4 . fumaca )

87 s e l f . l a b e l _ 5 . c l i c k . connect ( s e l f . la b e l _ 5 . s a l )

88 s e l f . l a b e l _ 6 . c l i c k . connect ( s e l f . la b e l _ 6 . CO2)

89 s e l f . l a b e l _ 7 . c l i c k . connect ( s e l f . la b e l _ 7 . FE2O3)

Capítulo 2. Desenvolvimento dos jogos 53

90 s e l f . l a b e l _ 8 . c l i c k . connect ( s e l f . la b e l _ 8 . H2O)

91 s e l f . l a b e l _ 9 . c l i c k . connect ( s e l f . la b e l _ 9 .NACL)

93 QMetaObject . connectSlotsByName ( MainWindow)

94 # setupUi

96 de f r e t r a n s l a t e U i ( s e l f , MainWindow ) :

97 MainWindow . setWindowTitle ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,

u"MainWindow" , None ) )

98 s e l f . l a b e l _ 2 . s e t T e x t ( "" )

99 s e l f . l a b e l _ 3 . s e t T e x t ( "" )

100 s e l f . l a b e l _ 5 . s e t T e x t ( "" )

101 s e l f . l a b e l _ 6 . s e t T e x t ( "" )

102 s e l f . l a b e l _ 7 . s e t T e x t ( "" )

103 s e l f . l a b e l _ 8 . s e t T e x t ( "" )

104 s e l f . l a b e l _ 9 . s e t T e x t ( "" )

105 s e l f . l a b e l _ 4 . s e t T e x t ( "" )

106 s e l f . l a b e l . s et Te x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<html

><head /><body ><span style =\" font - size :12 pt; font -

weight :600;\" > Jogo da memoria : <span style

=\" font -size :10 pt; font - weight :600;\" > Combine as cartas de estrutura

molecular com os materiais correspondentes </body ></html >" ,

None ) )

107 # r e t r a n s l a t e U i

Código 11 –

Código gerado ao converter o interface.ui em linguagem do Python, após

execução do comando 7

2.2.8.4 Criando os importes e copiando a interface convertida para o aplicativo.py

Na sub-subsecção anterior se encontra os arquivos em Python após utilizar os

comandos de conversão 6e7, nessa sub-subsecção vamos começar a desenvolver o apli-

cativo.py, importando as bibliotecas e recursos generalizados que vai ser utilizado no

aplicativo com a utilização do asterisco, conforme pode ser observado no código 12, depois

que o aplicativo estiver completo, teremos que mudar para apenas os especíﬁcos utili-

zados no projeto, nessa sub-subsecção também vamos adicionar o código convertido 11

no aplicativo,Tendo importado os módulos que vão ser utilizados, vamos abrir o arquivo

interface.py para copiar o seu conteúdo, do class Ui_MainWindow(object): conforme pode

ser observado no código 13, que é tudo após os importes da interface, no Geany tem um

botão de + e - antes de cada local de indentação, ao clicar pode minimizar ou expandir o

conteúdo, após ter copiado seu conteúdo o aplicativo.py deve ﬁcar conforme o código 14,

não se precisa mexer no Ui_MainWindow(object), podendo minimizar para ﬁcar mais

visível, conforme pode ser observado na ﬁgura 39.

1#−∗− coding : u t f −8−∗−

Capítulo 2. Desenvolvimento dos jogos 54

2#Importando o s ist ema e o tempo abaixo , e a l i n ha de cima d e f i n e o t i p o de

c ó d i g o a s e r usado no python , o has htag (#) é u t i l i z a d o para d e f i n i r

coment á r i o s .

3import sys , time

5#Importando as imagens do qrc , que foram c o n v e r t i d a s para o a rqui vo

r e c u r s o s . py .

6import r e c u r s o s

8#Importando os o b j e t o s do PySide2 u t i l i z a d o s no programa , ∗simboliza tudo

em python , no f u t u r o vamos mudar p ara o s e s p ec í f i c o s n e c e s s á r i o s , p ara

f i c a r mais l e v e .

9from PySide2 . QtGui import ∗

10 from PySide2 . QtWidgets import ∗

11 from PySide2 . QtCore import ∗

Código 12 – Criando os importes generalizado para o aplicativo

1#−∗− coding : u t f −8−∗−

3#######################################################################

4## Form gen e r ated from r ead i ng UI f i l e ’ i n t e r f a c e . u i ’

5##

6## Created by : Qt User I n t e r f a c e Compiler v e rs i o n 5 . 1 5 . 2

7##

8## WARNING! A l l ch ang es made i n t h i s f i l e w i l l be l o s t when r e c o m p i l i n g UI

file !

9#######################################################################

11 from PySide2 . QtCore import ∗

12 from PySide2 . QtGui import ∗

13 from PySide2 . QtWidgets import ∗

15 from clicklabel import clicklabel

17 import unico_rc

19 #S e l e c i o n a r daqui a t é . . .

21 class Ui_MainWindow( object) :

22 de f s etupUi ( s e l f , MainWindow ) :

23 i f not MainWindow . objectName ( ) :

24 MainWindow . setObjectName ( u"MainWindow")

25 MainWindow . r e s i z e ( 5 61 , 546)

26 MainWindow . setAutoFillBackground ( F als e )

27 s e l f . c e n t r a l w i d g e t = QWidget (MainWindow )

28 s e l f . c e n t r a l w i d g e t . setObjectName ( u" centralwidget " )

29 s e l f . l abe l_ 2 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

Capítulo 2. Desenvolvimento dos jogos 55

30 s e l f . l a b e l _ 2 . setObjectName (u" label_2 " )

31 s e l f . l a b e l _ 2 . setGeometry (QRect (10 , 90 , 121 , 211) )

32 s e l f . l a b e l _2 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

33 s e l f . l a b e l _ 2 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

34 s e l f . l a b el_2 . s e t S c a l e d C o n t e n t s ( True )

35 s e l f . l abe l_ 3 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

36 s e l f . l a b e l _ 3 . setObjectName (u" label_3 " )

37 s e l f . l a b e l _ 3 . setGeometry (QRect (150 , 90 , 121 , 211) )

38 s e l f . l a b e l _3 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

39 s e l f . l a b e l _ 3 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

40 s e l f . l a b el_3 . s e t S c a l e d C o n t e n t s ( True )

41 s e l f . l abe l_ 5 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

42 s e l f . l a b e l _ 5 . setObjectName (u" label_5 " )

43 s e l f . l a b e l _ 5 . setGeometry (QRect (430 , 90 , 121 , 211) )

44 s e l f . l a b e l _5 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

45 s e l f . l a b e l _ 5 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

46 s e l f . l a b el_5 . s e t S c a l e d C o n t e n t s ( True )

47 s e l f . l abe l_ 6 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

48 s e l f . l a b e l _ 6 . setObjectName (u" label_6 " )

49 s e l f . l a b e l _ 6 . setGeometry (QRect (10 , 320 , 121 , 211) )

50 s e l f . l a b e l _6 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

51 s e l f . l a b e l _ 6 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

52 s e l f . l a b el_6 . s e t S c a l e d C o n t e n t s ( True )

53 s e l f . l abe l_ 7 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

54 s e l f . l a b e l _ 7 . setObjectName (u" label_7 " )

55 s e l f . l a b e l _ 7 . setGeometry (QRect (150 , 320 , 121 , 211) )

56 s e l f . l a b e l _7 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

57 s e l f . l a b e l _ 7 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

58 s e l f . l a b el_7 . s e t S c a l e d C o n t e n t s ( True )

59 s e l f . l abe l_ 8 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

60 s e l f . l a b e l _ 8 . setObjectName (u" label_8 " )

61 s e l f . l a b e l _ 8 . setGeometry (QRect (290 , 320 , 121 , 211) )

62 s e l f . l a b e l _8 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

63 s e l f . l a b e l _ 8 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

64 s e l f . l a b el_8 . s e t S c a l e d C o n t e n t s ( True )

65 s e l f . l abe l_ 9 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

66 s e l f . l a b e l _ 9 . setObjectName (u" label_9 " )

67 s e l f . l a b e l _ 9 . setGeometry (QRect (430 , 320 , 121 , 211) )

68 s e l f . l a b e l _9 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

69 s e l f . l a b e l _ 9 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

70 s e l f . l a b el_9 . s e t S c a l e d C o n t e n t s ( True )

71 s e l f . l abe l_ 4 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

72 s e l f . l a b e l _ 4 . setObjectName (u" label_4 " )

73 s e l f . l a b e l _ 4 . setGeometry (QRect (290 , 90 , 121 , 211) )

74 s e l f . l a b e l _4 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

75 s e l f . l a b e l _ 4 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

76 s e l f . l a b el_4 . s e t S c a l e d C o n t e n t s ( True )

Capítulo 2. Desenvolvimento dos jogos 56

77 s e l f . l a b e l = QLabel ( s e l f . c e n t r a l w i d g e t )

78 s e l f . l a b e l . setObjectName ( u"label" )

79 s e l f . l a b e l . setGeometry ( QRect ( 10 , 10 , 541 , 6 1) )

80 s e l f . l a b e l . setTextFormat (Qt . AutoText )

81 s e l f . l a b e l . setWordWrap ( F a lse )

82 s e l f . l a b e l . s e t T e x t I n t e r a c t i o n F l a g s ( Qt . N oT ex tI nt er ac tio n )

83 MainWindow . s et Ce nt ralWidget ( s e l f . c e n t r a l w i d g e t )

85 s e l f . r e t r a n s l a t e U i (MainWindow )

86 s e l f . l a b e l _ 2 . c l i c k . connect ( s e l f . la b e l _ 2 . agua )

87 s e l f . l a b e l _ 3 . c l i c k . connect ( s e l f . la b e l _ 3 . ferrugem )

88 s e l f . la b e l _ 4 . c l i c k . connect ( s e l f . la b e l _ 4 . fumaca )

89 s e l f . l a b e l _ 5 . c l i c k . connect ( s e l f . la b e l _ 5 . s a l )

90 s e l f . l a b e l _ 6 . c l i c k . connect ( s e l f . la b e l _ 6 . CO2)

91 s e l f . l a b e l _ 7 . c l i c k . connect ( s e l f . la b e l _ 7 . FE2O3)

92 s e l f . l a b e l _ 8 . c l i c k . connect ( s e l f . la b e l _ 8 . H2O)

93 s e l f . l a b e l _ 9 . c l i c k . connect ( s e l f . la b e l _ 9 .NACL)

95 QMetaObject . connectSlotsByName ( MainWindow)

96 # setupUi

98 de f r e t r a n s l a t e U i ( s e l f , MainWindow ) :

99 MainWindow . setWindowTitle ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,

u"MainWindow" , None ) )

100 s e l f . l a b e l _ 2 . s e t T e x t ( "" )

101 s e l f . l a b e l _ 3 . s e t T e x t ( "" )

102 s e l f . l a b e l _ 5 . s e t T e x t ( "" )

103 s e l f . l a b e l _ 6 . s e t T e x t ( "" )

104 s e l f . l a b e l _ 7 . s e t T e x t ( "" )

105 s e l f . l a b e l _ 8 . s e t T e x t ( "" )

106 s e l f . l a b e l _ 9 . s e t T e x t ( "" )

107 s e l f . l a b e l _ 4 . s e t T e x t ( "" )

108 s e l f . l a b e l . s et Te x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<html

><head /><body ><span style =\" font - size :12 pt; font -

weight :600;\" > Jogo da memoria : <span style

=\" font -size :10 pt; font - weight :600;\" > Combine as cartas de estrutura

molecular com os materiais correspondentes </body ></html >" ,

None ) )

109 # r e t r a n s l a t e U i

110

111 # . . . a qui para f a z e r a c ó pia e p as s ar a a p l i c a t i v o . py

Código 13 – Abrindo o código da interface para copiar sua classe

1#−∗− coding : u t f −8−∗−

2#Importando o s ist ema e o tempo abaixo , e a l i n ha de cima d e f i n e o t i p o de

c ó d i g o a s e r usado no python , o has htag (#) é u t i l i z a d o para d e f i n i r

coment á r i o s .

Capítulo 2. Desenvolvimento dos jogos 57

3import sys , time

4#Importando as imagens do qrc , que foram c o n v e r t i d a s para o a rqui vo

r e c u r s o s . py .

5import r e c u r s o s

7#Importando os o b j e t o s do PySide2 u t i l i z a d o s no programa , ∗simboliza tudo

em python , no f u t u r o vamos mudar p ara o s e s p ec í f i c o s n e c e s s á r i o s , p ara

f i c a r mais l e v e .

8from PySide2 . QtGui import ∗

9from PySide2 . QtWidgets import ∗

10 from PySide2 . QtCore import ∗

13 class Ui_MainWindow( object) :

14 de f s etupUi ( s e l f , MainWindow ) :

15 i f not MainWindow . objectName ( ) :

16 MainWindow . setObjectName ( u"MainWindow")

17 MainWindow . r e s i z e ( 5 61 , 546)

18 MainWindow . setAutoFillBackground ( F als e )

19 s e l f . c e n t r a l w i d g e t = QWidget (MainWindow )

20 s e l f . c e n t r a l w i d g e t . setObjectName ( u" centralwidget " )

21 s e l f . l abe l_ 2 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

22 s e l f . l a b e l _ 2 . setObjectName (u" label_2 " )

23 s e l f . l a b e l _ 2 . setGeometry (QRect (10 , 90 , 121 , 211) )

24 s e l f . l a b e l _2 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

25 s e l f . l a b e l _ 2 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

26 s e l f . l a b el_2 . s e t S c a l e d C o n t e n t s ( True )

27 s e l f . l abe l_ 3 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

28 s e l f . l a b e l _ 3 . setObjectName (u" label_3 " )

29 s e l f . l a b e l _ 3 . setGeometry (QRect (150 , 90 , 121 , 211) )

30 s e l f . l a b e l _3 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

31 s e l f . l a b e l _ 3 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

32 s e l f . l a b el_3 . s e t S c a l e d C o n t e n t s ( True )

33 s e l f . l abe l_ 5 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

34 s e l f . l a b e l _ 5 . setObjectName (u" label_5 " )

35 s e l f . l a b e l _ 5 . setGeometry (QRect (430 , 90 , 121 , 211) )

36 s e l f . l a b e l _5 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

37 s e l f . l a b e l _ 5 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

38 s e l f . l a b el_5 . s e t S c a l e d C o n t e n t s ( True )

39 s e l f . l abe l_ 6 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

40 s e l f . l a b e l _ 6 . setObjectName (u" label_6 " )

41 s e l f . l a b e l _ 6 . setGeometry (QRect (10 , 320 , 121 , 211) )

42 s e l f . l a b e l _6 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

43 s e l f . l a b e l _ 6 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

44 s e l f . l a b el_6 . s e t S c a l e d C o n t e n t s ( True )

45 s e l f . l abe l_ 7 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

46 s e l f . l a b e l _ 7 . setObjectName (u" label_7 " )

Capítulo 2. Desenvolvimento dos jogos 58

47 s e l f . l a b e l _ 7 . setGeometry (QRect (150 , 320 , 121 , 211) )

48 s e l f . l a b e l _7 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

49 s e l f . l a b e l _ 7 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

50 s e l f . l a b el_7 . s e t S c a l e d C o n t e n t s ( True )

51 s e l f . l abe l_ 8 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

52 s e l f . l a b e l _ 8 . setObjectName (u" label_8 " )

53 s e l f . l a b e l _ 8 . setGeometry (QRect (290 , 320 , 121 , 211) )

54 s e l f . l a b e l _8 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

55 s e l f . l a b e l _ 8 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

56 s e l f . l a b el_8 . s e t S c a l e d C o n t e n t s ( True )

57 s e l f . l abe l_ 9 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

58 s e l f . l a b e l _ 9 . setObjectName (u" label_9 " )

59 s e l f . l a b e l _ 9 . setGeometry (QRect (430 , 320 , 121 , 211) )

60 s e l f . l a b e l _9 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

61 s e l f . l a b e l _ 9 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

62 s e l f . l a b el_9 . s e t S c a l e d C o n t e n t s ( True )

63 s e l f . l abe l_ 4 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

64 s e l f . l a b e l _ 4 . setObjectName (u" label_4 " )

65 s e l f . l a b e l _ 4 . setGeometry (QRect (290 , 90 , 121 , 211) )

66 s e l f . l a b e l _4 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

67 s e l f . l a b e l _ 4 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

68 s e l f . l a b el_4 . s e t S c a l e d C o n t e n t s ( True )

69 s e l f . l a b e l = QLabel ( s e l f . c e n t r a l w i d g e t )

70 s e l f . l a b e l . setObjectName ( u"label" )

71 s e l f . l a b e l . setGeometry ( QRect ( 10 , 10 , 541 , 6 1) )

72 s e l f . l a b e l . setTextFormat (Qt . AutoText )

73 s e l f . l a b e l . setWordWrap ( F a lse )

74 s e l f . l a b e l . s e t T e x t I n t e r a c t i o n F l a g s ( Qt . N oT ex tI nt er ac tio n )

75 MainWindow . s et Ce nt ralWidget ( s e l f . c e n t r a l w i d g e t )

77 s e l f . r e t r a n s l a t e U i (MainWindow )

78 s e l f . l a b e l _ 2 . c l i c k . connect ( s e l f . la b e l _ 2 . agua )

79 s e l f . l a b e l _ 3 . c l i c k . connect ( s e l f . la b e l _ 3 . ferrugem )

80 s e l f . la b e l _ 4 . c l i c k . connect ( s e l f . la b e l _ 4 . fumaca )

81 s e l f . l a b e l _ 5 . c l i c k . connect ( s e l f . la b e l _ 5 . s a l )

82 s e l f . l a b e l _ 6 . c l i c k . connect ( s e l f . la b e l _ 6 . CO2)

83 s e l f . l a b e l _ 7 . c l i c k . connect ( s e l f . la b e l _ 7 . FE2O3)

84 s e l f . l a b e l _ 8 . c l i c k . connect ( s e l f . la b e l _ 8 . H2O)

85 s e l f . l a b e l _ 9 . c l i c k . connect ( s e l f . la b e l _ 9 .NACL)

87 QMetaObject . connectSlotsByName ( MainWindow)

88 # setupUi

90 de f r e t r a n s l a t e U i ( s e l f , MainWindow ) :

91 MainWindow . setWindowTitle ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,

u"MainWindow" , None ) )

92 s e l f . l a b e l _ 2 . s e t T e x t ( "" )

Capítulo 2. Desenvolvimento dos jogos 59

93 s e l f . l a b e l _ 3 . s e t T e x t ( "" )

94 s e l f . l a b e l _ 5 . s e t T e x t ( "" )

95 s e l f . l a b e l _ 6 . s e t T e x t ( "" )

96 s e l f . l a b e l _ 7 . s e t T e x t ( "" )

97 s e l f . l a b e l _ 8 . s e t T e x t ( "" )

98 s e l f . l a b e l _ 9 . s e t T e x t ( "" )

99 s e l f . l a b e l _ 4 . s e t T e x t ( "" )

100 s e l f . l a b e l . s et Te x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<html

><head /><body ><span style =\" font - size :12 pt; font -

weight :600;\" > Jogo da memoria : <span style

=\" font -size :10 pt; font - weight :600;\" > Combine as cartas de estrutura

molecular com os materiais correspondentes </body ></html >" ,

None ) )

101 # r e t r a n s l a t e U i

Código 14 – O código aplicativo.py após fazer copiar a classe da interface

Figura 39 – Minimizando a classe Ui_MainWindows no editor de textos Geany

2.2.8.5 Criando a clicklabel juntamente com a conﬁguração do aplicativo

Na sub-subsecção anterior criamos os importes a serem utilizados no projeto e

copiamos a classe Ui_MainWindow(object) para o aplicativo.py, nessa sub-subsecção

vamos criar a classe da clicklabel onde se encontra as imagens de cartas, conforme o

código 15,começando ao criar a função __init__ e deﬁnindo seu parente como o QWidget,

e iniciando o super dentro do __init__, para podermos usar os componentes de seu parente,

que vai ser necessário mais para frente, para entender melhor como funciona o __init__

Capítulo 2. Desenvolvimento dos jogos 60

e a utilização de parente

ﬁlho dentro das funções podemos observar vários materiais de

apoio para diversas situações conforme pode ser observado em (U/TLAZOLTEOTL,2014;

SIGNALPROCESSED,2018;NIKHILAGGARWAL3,2019;SPANNBAUER,2019), após

criar o __init__ vamos criar a função click() que serve de sinal, para caso seja clicado

com o mousse e as funções dos receptores, tendo que instanciar @slot antes das funções,

conforme pode ser observado na documentação do QT em (QT,p), sendo as funções do

receptor agua(), ferrugem(), sal(), ..., atualmente para sua visualização funcional vamos

criar as funções dos receptores com apenas uma mensagem no terminal do Python de

qual função foi acionada, para garantir que está funcionando, depois de sua veriﬁcação,

mudaremos para trocar sua imagem de plano de fundo por outra imagem, para a utilização

como base para clicklabel usaremos o exemplo encontrado em (CUNHA,2017), após

criado a classe do clicklabel, vamos criar o mainWindows e o inicializador do aplicativo,

tendo materiais de apoio escritos ou em videos como em (VERSAFLOW,2020), onde

na classe MainWindow, vamos adicionar o Ui_MainWindow, instanciando que a classe

vai ser QMainWindow e vai utilizar o Ui_MainWindow, por ultimo vamos veriﬁcar se o

aplicativo foi executado com a utilização do if, onde vamos carregar o aplicativo e mostrar

na tela, ao terminar de criar todo o código podemos apertar F5 no Geany para observar

o código sendo executado, com a interface feita, e quando clicado nas cartas, os nomes

sendo mostrados no terminal, conforme a ﬁgura 40.

1#Criando a c l i c k l a b e l que s e baseado na QLabel , que f o i c r i a d o no QT Design

2class c l i c k l a b e l ( QLabel ) :

3#Criando a fun ç ão de i n i c i a l i z a ção , que se executa cada vez que o

programa c r i a uma nova l a b e l u t i l i z a n d o o c l i c k l a b e l , e setando quem é

seu pa ren te , n e s s e c aso QWidget

4de f __init__ ( s e l f , parent=QWidget ) :

5#Gar an tindo que v a i f u nc io nar , e v a i a c i o n a r todas as v e z e s com o s u per

( )

6super ( ) . __init__ ( p aren t )

8#Criand o o s i n a l que f o i c r i a d o no e d i t o r de s i n a i s no QT Desi gn er , é

i mp orta n te t e r o mesmo nome , n e s s e c a so c l i c k .

9c l i c k = S i g n a l ( )

11 #Mudando a f un ç ã o padr ã o do c l i c k do mouse , par a f a z e r a l g o e x t r a .

12 de f mousePressEvent ( s e l f , e v ent ) :

13 #Adicionando que apó s c l i c a r com o mouse e l e emita o s i n a l c l i c k .

14 s e l f . c l i c k . emit ( )

16 #Cr ia ç ão dos s l o t s , os r e c e p t o r e s do s i n a l c l i c k , para i s s o sempre a fun ç

ão tem que t e r o nome do s l ot , d e f i n i d o no QT De signer , e s e r d e f i n i d o

@ sl o t ( ) a nt es da f un ç ã o

17 @Slot ( )

18 de f agua ( s e l f ) :

Capítulo 2. Desenvolvimento dos jogos 61

19 #Na fun ç ã o da agua vamos f a z e r que sempre que o r e c e p t o r r e c e b e r um

s i n a l , mo st rar no t e r m i n a l agua .

20 p r i n t ("agua " )

21 #Repe t i ç ã o da mesma f un ç ã o de agua , mudando a pena s o nome .

22 @Slot ( )

23 de f f erruge m ( s e l f ) :

24 p r i n t ("ferrugem " )

25 @Slot ( )

26 de f fumaca ( s e l f ) :

27 p r i n t ("fumaca" )

28 @Slot ( )

29 de f s a l ( s e l f ) :

30 p r i n t ("sal" )

31 @Slot ( )

32 de f CO2( s e l f ) :

33 p r i n t ("CO2" )

34 @Slot ( )

35 de f FE2O3( s e l f ) :

36 p r i n t ("FE2O3 " )

37 @Slot ( )

38 de f H2O( s e l f ) :

39 p r i n t ("H2O" )

40 @Slot ( )

41 de f NACL( s e l f ) :

42 p r i n t ("NACL " )

44 #Tendo c r i ad o tudo , vamos c r i a r a j a n e l a p r i n c i p a l , u t i l i z a n d o a i n t e r f a c e

c r i a d a no QT D esigne r

45 class MainWindow(QMainWindow , Ui_MainWindow) :

46 #Funç ão de i n i c i a l i z a ç ão

47 de f __init__ ( s e l f ) :

48 #G ar antindo su a exe cu ç ã o

49 super(MainWindow , s e l f ) . __init__ ( )

50 #Adicionando a i n t e r f a c e

51 s e l f . setup Ui ( s e l f )

52 #Mostrando a i n t e r f a c e

53 s e l f . show ( )

55 #Começ o da a p l i c a ç ão , d e f i n i n d o seu i n í c i o p r i n c i p a l

56 i f __name__ == ’__main__ ’ :

57 #Defi n e a c r i a ç ão do a p l i c a t i v o

58 app = QApplicat ion ( sys . argv )

59 #Adicionando a j a n e l a p r i n c i p a l para o a p l i c a t i v o

60 mainWin = MainWindow ( )

61 #Executando o a p l i c a t i v o

62 r e t = app . exec_ ( )

63 #Terminando o programa

Capítulo 2. Desenvolvimento dos jogos 62

64 sy s . e x i t ( )

Código 15 – Criação da clicklabel, MainWindows e seu inicializa-dor

Figura 40 – Visuzalição da execução do programa no geany e seu funcionamento

2.2.8.6 Alterando a função do receptor para trocar a imagem da carta

Na sub-subsecção anterior criamos ﬁnalizamos o aplicativo básico, com a função de

click funcionando para mostrar uma mensagem no terminal, e observamos seu funciona-

mento, nessa sub-subsecção vamos começar a fazer as cartas mudarem de face ao serem

clicadas, começando pela função agua encontrado no código 16, após criar para a função

de agua só é necessário copiar para as outras funções, mudando os nome do caminho do

QPixmap de /materia/agua para o próximo, como /molecula/agua ou /materia/ferrugem,

baseado em qual é o nome da função e então todas as labels estaram trocando de face,

para criação da função vamos trabalhar com o QPixmap, Qlabel e QCursor utilizando suas

funções internas, podendo veriﬁcar elas nas documentações encontradas no QT em (QT,j;

QT,f;QT,e), tendo arrumado a função agua conforme o código 16, podemos veriﬁcar a

aplicação funcionando apertando F5 no Geany, conforme a ﬁgura 41.

1@Slot ( )

2de f agua ( s e l f ) :

4#Vamos mudar a imagem , para quando c l i c a r mudar , en tr e f a ce da f r e n t e e a

f a c e de t r á s , para i s s o vamos usar o QPixmap , como no QT Desig ne r ,

usando o caminho d e f i n i d o no unico . qrc , come ç ando com : / para d e f i n i r

Capítulo 2. Desenvolvimento dos jogos 63

seu i n í c io , d ep ois s ó u t i l i z a m o s o p r e f i x o / ap eli do , n es s e c aso m at eri a

/agua

5pixmap = QPixmap( u":/ materia /agua" )

6#V e r i f i c a ç ão s e a imagem a tu al é i g u a l a imagem carregad a , o s e l f ,

r e p r e s e n t a a pr ó p r i a i n s t â n ci a , que s e t r abalha , pixmap ( ) , é

c ar re gam en t o do pixmap , e d e p o i s usamos a fun ç ã o t oI ma ge ( ) pa ra

tr a nsf o rma r em imagem , para poder comparar com a pixmap que c r iamos

acima , d entro de c l a s s e s , se u t i l i z a . para chamar a t r i b u t o s da c l a s s e ,

se nd o p ar â metros , f un ç õ e s , . . .

7i f ( s e l f . pixmap ( ) . toImage ( ) == pixmap . toImage ( ) ) :

8#Se f o r i g u a l ambas , v a i mudar o pixmap , p ara a c a r t a do fundo , no

caminho d e f i n i d o no . qrc

9pixmap = QPixmap( u" :/ imagens / fu ndo_carta " )

10 #Aqui chamamos a p r ó p r i a l a b e l com o s e l f e d e f i n i m o s uma nova imagem

usando o pixmap c r i a d o a n te r iormente , que caso s e j a i g u a l a imagem de á

gua , e e ntr e no i f , v ai s e r o fundo , e c a s o s e j a d i f e r e n t e e não entre ,

va i mostrar a imagem da á gua .

11 s e l f . setPixmap ( pixmap )

13 #Mudando o c ursor , para normal , ou com p o nte iro , c r ia mos um c u r s o r com

ponteiro

14 c u r s o r = QCursor ( Qt . Po inting HandCurs or )

15 #V e r i f i c a ç ã o s e o c u r s o r c r i a d o é i g u a l ao a t u a l

16 i f ( s e l f . c u r s o r ( ) == c u r s o r ) :

17 #Se f o r i g u a l , v a i mudar o c u r s o r para o normal , faze nd o e l e r e c e b e r um

novo QCursor .

18 c u r s o r = QCursor ( Qt . ArrowCursor )

19 #Aqui chamamos a p r ó p r i a l a b e l com o s e l f e d e f i n i m o s o novo c u r s o r

c ria do , como para o pixmap , s e o c u r s o r f o r i g u a l a p o nt eir o , v ai mudar

pa ra normal , e c a so nã o s e j a não v ai mudar e v a i s e r p o n t e i r o .

20 s e l f . s e tC ur so r ( c u r s o r )

Código 16 – Alteração da função do receptor agua para trocar sua imagem

Capítulo 2. Desenvolvimento dos jogos 64

Figura 41 – Visualização do programa após mudança de fundo para agua

2.2.8.7 Alterando a função do receptor para fazer as comparações

Na sub-subsecção anterior fora alterado a função agua para mudar a face da carta, e

veriﬁcado seu funcionamento, nessa sub-subsecção vamos começar a fazer as comparações,

vendo se as cartas de matéria e molécula condizem uma com a outra, para isso é necessário

ter um local para armazenar os valores da primeira carta clicada, e ser de possível acessar

para todas as labels de cartas, para isso temos que criar uma variável no seu parente

QWidget, para isso é necessário vamos voltar ao QT Design e promover o centralwidget

para novo_widget onde se encontra as clicklabels para podermos adicionar essas novas

variáveis de veriﬁcação. Como no caso da criação do clicklabel na subsecção 2.2.6, vamos

criar um novo chamado novo_widget e promover o centralwidget para ele, para facilitar

vamos usar o inspetor de objetos e apertar botão direito do mouse, promote to . . . , conforme

pode ser observado na ﬁgura 42, e criar o novo_widget, e apertar na própria tela promote,

conforme pode ser observado na ﬁgura 43, sendo que nesse caso não é necessário criar sinais

ou receptores, apenas promover pois as variáveis seram criadas no Python apenas, tendo

feito essa alteração temos que salvar o arquivo interface.ui, e novamente ir no terminal,

Capítulo 2. Desenvolvimento dos jogos 65

até o local da pasta e executa o comando de conversão 7, tendo feito a conversão temos

que abrir o arquivo interface.py e novamente copiar o class Ui_MainWindow(object): e

seu conteúdo para o aplicativo.py, como fora feito anteriormente na sub-subsecção 2.2.8.4,

sendo copiar tudo após os import, e substitui o class Ui_MainWindow(object): que está

no aplicativo.py, onde estamos desenvolvendo a aplicação, depois de copiado, vamos criar

uma nova classe chamada novo_widget, antes da classe clicklabel, e depois da classe

Ui_MainWindow, sendo encontrado no código 17, onde vamos criar as variáveis para

armazenar se foi encontrado um conjunto de materia e molecula correto, e qual foi a

primeira carta virada, para poder comparar ao virar a segunda carta, tendo criado o

novo_widget com suas novas variáveis de armazenamento, vamos mudar a função da

agua novamente conforme o código 18, começando por deﬁnindo o tipo e nome, que

vamos utilizar no caminho para imagem e nas suas comparações, utilizando as variáveis

de seu parente novo_widget, tendo deﬁnido qual é seu parente ao criar o clicklabel na

sub-subsecção 2.2.8.5, mudando de inverter a imagem entre fundo e água, para apenas

mudar para a face para água, e mudando seu cursor de mão para o cursor normal do

mousse, e bloqueando seus sinais, para não ser possível clicar novamente na imagem,

com base na documentação do QT sobre o QSignalBlocker encontrado em (QT,m), após

bloquear seus sinais fazemos uma veriﬁcação para ver se foi a primeira carta virada, caso

seja adicionando suas informações na variável de seu parente novo_widget, caso não seja

fazendo sua comparação se a primeira carta condiz com a carta virada atualmente, caso

seja muda a variável de conjunto para verdadeiro, e passando qual o conjunto encontrado,

e resetando a variavel da primeira carta, caso não seja uma combinação broqueamos o sinal

de todas as clicklabels, acessando pelo seu parente novo_widget e achando todos seus ﬁlhos

do tipo Qlabel utilizando as funções de QObject presentes em todos as widgets criadas,

com base na documentação do QT em (QT,i), para podermos deixar a carta virada por um

tempo, antes de desvirar ambas as cartas, temos que usar um contador de tempo, podendo

ser encontrado como ser utilizado em materiais de apoio como em (BLACKFENIX06,

2017), após o tempo deﬁnido em 500 milisegundos passar, vamos desvirar ambas as cartas,

e acessar seu parente novo_widget para liberar o sinal de todas as cartas com a imagem

de fundo, tendo alterado a função agua, é copiala para as outras funções de receptores e

mudar apenas as variaveis tipo e nome no começo da função.

Capítulo 2. Desenvolvimento dos jogos 66

Figura 42 – Selecionando a centralwidget para promove-la

Capítulo 2. Desenvolvimento dos jogos 67

Figura 43 – Selecionando a classe especial novo_widget recém criada

1#Criando a nova c l a s s e novo_widget baseada no QWidget para armazenar as

v a r i á v e i s de compara ção , para s e r usado nas fun ç õ e s do c l i c k l a b e l .

2class novo_widget ( QWidget ) :

3#Criando a fun ç ão de i n i c i a l i z a ção , que se executa cada vez que o

programa c r i a uma nova widget u t i l i z a n d o o novo_widget , n ess e caso

apena s o c e n t r a l w i d g e t , e s eta n do quem é s eu p are nte , n e s s e c as o é o

MainWindow , por ém como não vamos u t i l i z á lo , estamos como nenhum , None

4de f __init__ ( s e l f , parent=None ) :

5#G ar antindo su a exe cu ç ã o

6super ( ) . __init__ ( p aren t )

7#Setand o uma v a r i á v e l na pr ó p r i a widget , por i s s o chamamos o s e l f e

usamos o ponto para d e f i n i r que f az part e dele , que vamos usar e s s a v ar i

á v e l para armazenar o l o c a l da p r im e ir a c arta , para poder t r a b a l h a r com

e l a cas o , o c onj u n to s e j a v e rd ad ei ro , tr av ando , e c a s o nã o s e j a ,

d e s v i r a r a c a rta , d e f i n i m o s s eu v a l o r i n i c i a l como um t e x t o v a z i o

8self . primeira_carta = ""

9#Setando uma v a ri á v e l na pró p r ia widget , como no a n t e r i o r usando o s e l f

e ponto , e s s a v a r i á v e l v ai armaze nar o t i p o da c ar t a , que v a i s e r o

nome usad o p ara f a z e r as compara ç õ e s , d e f i n i m o s s eu v a l o r i n i c i a l como

um texto vazio

10 self . tipo_primeira_carta = ""

Capítulo 2. Desenvolvimento dos jogos 68

11 #Setando uma v a ri á v e l na pró p r ia widget , como no a n t e r i o r usando o s e l f

e ponto , e s s a v a r i á v e l va i armazenar s e o c on junto das c a r t a s

s e l e c i o n a d a s e s t ão c o r r e t a s ou não , d ef in imo s seu va l or i n i c i a l como

falso

12 s e l f . conjunto = Fa l se

13 #Setando uma v a ri á v e l na pró p r ia widget , como no a n t e r i o r usando o s e l f

e ponto , e s s a v a r i á v e l va i armazenar o nome do c onjunto das c a r t a s

c o r r e t a s , d e f i n i m o s s eu v a l o r i n i c i a l como um t e x t o v a z i o

14 s e l f . conjunto_nome = ""

15 #Setando uma v a ri á v e l na pró p r ia widget , como no a n t e r i o r usando o s e l f

e ponto , e s s a v a r i á v e l v ai armazenar a q uan ti dad e de c o nj unt os c o r r e t o s

, n e s c e s s a r i o para sab e r s e venceram o j ogo da memó r i a , d e fi n im o s seu

v a l o r i n i c i a l em z e ro

16 s e l f . contador_conjunto = 0

Código 17 – Criação da classe novo_widget

1@Slot ( )

2de f agua ( s e l f ) :

3#Aqui vamos d e f i n i r t i p o de p r e f i x o , materia ou mol ecul a , confo rme o

u ni c o . q rc que f o i c r i a d o no QT D e signer

4t i p o = " materia "

5#Aqui vamos d e f i n i r o nome do a p e l i d o co nforme o u nico . qrc que f o i c r i a d o

no QT De s i g n er

6nome = " agua"

7#Aqui criamos o caminho para imagem , u t i l i z a n d o as v a r i á v e i s d e f i n i d a s

acima , para i s s o usamos de t e x t o + v a r i á v e l , n e s s e c as o usamos + pa ra

c o nc ate nar d o i s t e x t o s s epa r ad o s , ou c o n cat ena r t e x t o com v a r i á v e l ,

n e ss e cas o ":/ " + t i p o va i r e s u l t a r em " : / m ateria " e ao u t i l i z a r +"/"+nome

v ai co nc a tenar o r e s u l t a d o a n t e r i o r com " / agua " , r e s u l ta n do em " : /

materia / agua " , que é o caminho para a imagem de agua

8caminho = ":/"+t i p o+"/"+nome

10 #Vamos u sar o QPixmap , usando o caminho c r i a d o a n te r iormente , usando o ’ u

’ a nt e s do t e x t o para d e f i n i r , que v a i s e r um t e x t o uni co de , pa ra

a c e i t a r acentua ç õ e s e o ut ros c a r a c t e r e s e s p e c i a i s sem problemas , usando

assim o u " " e concatenando o caminho com o u""+ caminho

11 pixmap = QPixmap( u""+caminho )

12 #Aqui chamamos a p r ó p r i a l a b e l com o s e l f e d e f i n i m o s uma nova imagem

usando o pixmap c r i a d o a n te r iormente , ao c on tr á r i o de ant es , nã o

prec i s a mos f a z e r v e r i f i c a ç ão , e vamos apenas mudar a f a c e

13 s e l f . setPixmap ( pixmap )

15 #Criamos o c u r s o r como normal

16 c u r s o r = QCursor ( Qt . ArrowCursor )

17 #Aqui chamamos a p r ó p r i a l a b e l com o s e l f e d e f i n i m o s o novo c u r s o r

criado

18 s e l f . s e tC ur so r ( c u r s o r )

Capítulo 2. Desenvolvimento dos jogos 69

20 #Aqui chamamos a pr ó p r ia l a b e l e bloqueamos s eus s i n a i s , para que não s e

possa mais c l i c a r enquanto e s t á com a f a c e para cima .

21 s e l f . b l o c k S i g n a l s ( True )

23 #Vamos v e r i f i c a r se j á e x i s t e uma p r im e ir a ca r t a no par e n t e da l a b e l , por

i s s o chamamos a l a b e l com s e l f usamos o ponto para i d e n t i f i c a r sua l i g a

ç ão , e chamamos s eu parent e e v e r i f i c a m o s se sua v a r i á v e l

tipo_primeira_carta está vazia

24 i f ( s e l f . p a rent ( ) . t i p o _primeira_ c a r t a == "" ) :

25 #Caso a v a r i á v e l e s t e j a v az i a , qu er d i z e r que nã o t e v e uma p r i m e i r a

c a rt a ainda , ent ão vamos a d i c i o n a r o s v a l o r e s de ssa l a b e l como p r im ei ra

carta

26 #Aqui estamos passando o caminho da l a b e l para o par e n te na v a ri á v el

primeira_carta

27 s e l f . parent ( ) . p r i meira _ c arta = s e l f

28 #Aqui estamos mudando a v a r i a v e l tipo_prim ei ra_carta para agua

29 s e l f . parent ( ) . tip o _ p r imeira_car t a = nome

30 #Aqui s e v e r i f i c a s e o p r im e ir o i f d er f a l s o , ne ss e c a s o não e s t i v e r

v az i o , s e o t i p o da p r i m e i r a c a r t a é agua

31 elif ( s e l f . parent ( ) . tip o _ p r imeira_car t a == nome ) :

32 #Caso o t i p o s e j a agua , qu er d i z e r que a p r i m e i r a c a r t a e r a do t i p o

agua também, portanto fazendo um conjunto

33 #Aqui e stamos mudando o v a l o r da v a r i á v e l c onjunto do p a rente pa ra

v e rda de iro , achou uma combina ç ã o

34 s e l f . parent ( ) . conjunto = True

35 #Aqui e stamos mudando o v a l o r da v a r i á v e l conjunto_nome do p aren te para

agua

36 s e l f . parent ( ) . conjunto_nome = nome

37 #Aqui e stamos aumentando o v a l o r da v a r i á v e l c on ta do r_ co nj unto do

p arent e em 1 , p o i s achou uma combina ç ã o

38 s e l f . parent ( ) . contador_conjunto += 1

39 #Aqui e st am os mudando o v a l o r da p r i m e i r a c a r t a novamente para v a zi a ,

p o i s achou um par , tem que a ch ar outro par

40 s e l f . parent ( ) . p r i meira _ c arta = ""

41 #Aqui e st am os mudando o v a l o r do t i p o da p r i m e i r a c a r t a novamente pa ra

vazia , p o i s achou um par , tem que ach ar outro par

42 self . parent () . tipo_primeira_carta = ""

43 #Aqui s e não pa ssa r em nenhumas das v e r i f i c a ç õ es , resumindo caso , não

e s t e j a vazio , nem s e j a uma combina ç ão , resumindo duas c a r t a s de t i p o s

diferentes

44 e l s e :

45 #Agora que as c a rt a s foram e s c o l h i d a s erradas , temos que v o l ta r a f ac e

para fundo , a p arte de t r á s , que i n i c i a l m e n t e tinha , por ém temos que

d e i x a r p or um tempo para poderem v e r qual c a r t a er á , e e nq ua nto se

espera , temos que i m p edir que c o n tinue virando ou t ra s c arta s , para i s s o

vamos b l oq u ear t odos os s i n a i s , a t é d e s v i r a r as c a r t a s .

Capítulo 2. Desenvolvimento dos jogos 70

46 #Aqui u t i l i z a m o s f o r que s i g n i f i c a para cada , n e ss e c aso para cada

l a b e l no par e n t e de s s e o b j e t o , s e l f . p a rent ( ) , ache seu s f i l h o s que sejam

l a b e l s , . f i n d C h i l d r e n ( QLabel ) , como é mais de um f i l h o temos que

u t i l i z a r o f or , par a t r a b a l h a r com cada l a b e l

47 f o r l a b e l i n s e l f . p arent ( ) . f i n d C h i l d r e n ( QLabel ) :

48 #Aqui v e r i f i c a m o s s e a l a b e l do p are nte e s t á com o c u r so r de p onte iro

, que s i g n i f i c a que é a par te de t r á s , e pode s e r c l i c a d o .

49 i f l a b e l . c u r s o r ( ) == QCursor ( Qt . Pointin gHandCur sor ) :

50 #Caso s e j a o c u r s o r de p o nt eir o , b l o q u e i e s e us s i n a i s .

51 l a b e l . b l o c k S i g n a l s ( True )

53 #Criamos um c i c l o ( loop ) para p a ss ar o tempo , d e f i n i n d o u t i l i z a n d o

QEventLoop ( )

54 lo op = QEventLoop ( )

55 #Tendo c r i ad o o l oop u t i l i z a m o s o QTimer para f a z e r um c i c l o ú nico ,

s i n g l e S h o t de 500 m ili segund os , e d e po is e n c e r r a r o l oop .

56 QTimer . s i n g l e S h o t ( 500 , loop . q u i t )

57 #Aqui e xec uta mos o loo p , pa ra p a s s a r 500 m i l i s e g u n d o s a n t e s de

co ntin uar a usar o a p l i c a t i v o

58 loo p . exec_ ( )

60 #Agora ap ó s o l o op de 500 m i l i se gu ndo s , vamos v i r a r a p r i m e i r a c a r t a e

a segunda c a r ta de v o l t a para t r á s , vamos c a r r e g a r a imagem de fundo no

pixmap

61 pixmap = QPixmap( u" :/ imagens / fu ndo_carta " )

62 #Aqui d e f i n i m o s a p r ó p r i a l a b e l de v o l t a para o fu ndo

63 s e l f . setPixmap ( pixmap )

64 #Aqui d e f i n i m o s a l a b e l que e s t á armazenada no seu p a re n t e d e ntro do

p r i m e i r a c ar t a , de v o l t a para o f undo

65 s e l f . p a r ent ( ) . p r imeira_ c arta . setPixmap ( pixmap )

67 #Aqui c ri amos um c u r s o r de p o n t e i r o

68 c u r s o r = QCursor ( Qt . Po inting HandCurs or )

69 #Aqui d e f i n i m os a pr ó p r i a l a b e l de v o l t a pa ra p o n t e i r o

70 s e l f . s e tC ur so r ( c u r s o r )

71 #Aqui d e f i n i m o s a l a b e l que e s t á armazenada no seu p a re n t e d e ntro do

p r i m e i r a c ar t a , de v o l t a para p o n t e i r o

72 s e l f . p arent ( ) . p r im eira _car ta . s e t Cu rso r ( c u r s o r )

74 #Aqui vamos f a z e r o mesmo f o r de a n tes s ó que n es s e caso para

de sblo quea r a a p l i c a ç ão

75 f o r l a b e l i n s e l f . p arent ( ) . f i n d C h i l d r e n ( QLabel ) :

76 i f l a b e l . c u r s o r ( ) == QCursor ( Qt . Pointin gHandCur sor ) :

77 #Caso s e j a o c u r s o r de p o nt eir o , d e s b l o q u e i e s e us s i n a i s .

78 l a b e l . b l o c k S i g n a l s ( F als e )

80 #Apó s t e r mudado todos de v o l ta ao normal , vamos v o l t a r as v ar i á v e i s do

Capítulo 2. Desenvolvimento dos jogos 71

p a ren te da l a b e l p ara v a z i o

81 s e l f . parent ( ) . p r i meira _ c arta = ""

82 #Def in im os a v a r i á v e l do p arente des sa l a b e l chamado

tipo_primeira_carta de volta para vazio

83 self . parent () . tipo_primeira_carta = ""

Código 18 –

Alteração da função do receptor agua para fazer suas comparações com as

cartas viradas, para veriﬁcar se é uma combinação

2.2.9 Criando o segundo código aplicativo.py

Na subsecção anterior criamos a primeira parte do código, com todas as funções de

troca separadamente, com a veriﬁcação se foi achado uma combinação de cartas, nessa

subsecção vamos começar a criar a segunda parte do código, trocando de imagem ﬁxa

para aleatória, e deixando a função dos receptores indenticas sem precisar mudar seu

nome ou tipo, para ﬁcar mais fácil de se trabalhar é bom minimizar as funções para

não ocupar muito espaço, para fazer a mudança entre as imagens ﬁxas por carta para

aleatória não vamos precisar mexer muito na função de água, sendo sua unica mudança

a alteração entre tipo e nome por self.tipo e self.nome, sendo algo da própria label que

se referencia por self., para começar a desenvolver, precisamos importar a biblioteca de

aleatoridade chamada random, podendo utilizar a documentação do Python sobre random

em (PYTHON,b) como material de apoio, fazendo sua importação juntamente ao sys e

time, conforme pode ser observado no código 19, outra mudança nessesaria é a criação de

uma lista em novo_widget, com duas listas dentro com os nomes das imagens, sendo cada

lista de nomes a representação de materia e molecula, tendo mais informações sobre como

trabalhar e utilizar listas em (W3 Schools, ), contendo a criação da lista dentro da função de

inicialização __init__ do novo_widget adicionando abaixo de contador_conjunto como

uma nova variável do tipo lista que vamos nome-ala de lista, conforme pode ser observado

no código 20, apos ter atualizado o import e a classe novo_widget, vamos começar a mudar

o __init__ da clicklabel, conforme o código 21, a função __init__ é executada ao criar

cada label utilizando a classe clicklabel, como vai ser executado varias vezes, começamos

veriﬁcando a quantidade de nomes dentro das listas do seu parente novo_widget, e ao ter

a quantidade, fazemos veriﬁcações se ambas não estão vazias, caso não estejam utilizamos

a biblioteca do random para escolher uma lista e nome aleatoriamente, e após escolhido,

adicionamos ao self.tipo qual foi a lista e self.nome qual foi o nome e deletamos o nome

de dentro da lista, para evitar repetições, e depois temos veriﬁcações caso uma das listas

esteja vazia, para usar a lista que ainda possui nomes, ao arrumar o __init__ vamos

mudar às funções dos receptores, removendo às duas primeiras linhas de (tipo = "materia")

e (nome = "agua") que não precisaremos mais, pois vamos usar às quais foram criadas no

__init__, que foi executado quando a label foi criada, e tem que mudar os locais, onde

Capítulo 2. Desenvolvimento dos jogos 72

se encontra nome por self.nome e tipo por self.tipo, tendo feito em uma delas só vai ser

necessário copiar para as outras.

1#Importando o sistem a , tempo e fun ç õ e s para a l e a t o r i e d a d e do python abaixo ,

e a l i n h a de cima d e f i n e o t i p o de c ó digo a s e r usado no python , o

hashtag (#) é u t i l i z a d o para d e f i n i r coment á r i o s .

2import sys , time , random

Código 19 – Novo importes com time e random

1#Criand o uma v a r i á v el , com uma l i s t a , que p o s s u i duas l i s t a s den tro , par a

d e c l a r a r uma l i s t a u t i l i z a m o s c o l c h e t e s , uma l i s t a v a zi a é d e f i n i d o por

[ ] , n e s se caso cria mos uma l i s t a , com duas l i s t a s dentro , [ [ ] , [ ] ] , para

r e p r e s e n t a r que a p r im ei ra l i s t a é de m at eria e a segunda é mo lecu la ,

po d er i a u t i l i z a r um d i c i o n á r i o para f a z e r i s s o , por ém s e r i a mais

complexo , por e s s e motivo f o i e s c o l h i d o u sar l i s t a s , dentro das l i s t a s ,

s e e s c r e v e os nomes p e r t e n c e n t e ao s a p e l i d o s c r i a d o s no u nico . qrc , se ndo

e l e s " agua " , " ferrugem " , " fumaca " , " s a l "

2s e l f . l i s t a = [ [ "agua " ,"ferrugem " ," fumaca " ,"sal" ] , [ "agua " ,"ferrugem" ,"fumaca

","sal" ] ]

Código 20 – Adicionando uma lista para o novo_widget

1de f __init__ ( s e l f , parent=QWidget ) :

2#Gar an tindo que v a i f u nc io nar , e v a i a c i o n a r todas as v e z e s com o s u per ( )

3super ( ) . __init__ ( p aren t )

5#Aqui e st am os vendo a q u an tid a de de nomes d entro da p r i m e i r a l i s t a , s en do

quan tid ade de m at eria , usando l e n ( ) , que c ont a q uantidades de i t e n s

dentro de o b j e t o s no python , e nt ã o v e r i f i c a m o s a p o s i ç ão 0 da l i s t a ,

l i s t a [ 0 ] , c o nside r a ndo que l i s t a e s t á em seu parente , por i s s o s e l f .

parent ( ) . l i s t a [ 0 ] , em linguagem de programa ção é normal começ ar as

c ontag en s em 0 , p or i s s o a p r i m e i r a p o s i ç ão de uma l i s t a é 0 em vez de 1

6quantidade_materia = l e n ( s e l f . p a r ent ( ) . l i s t a [ 0 ] )

7#Aqui estamos vendo a quanti dade de nomes dentro da segunda l i s t a , sendo

quantidade de m o lecula

8quantidade_molecula = l e n ( s e l f . p a r e nt ( ) . l i s t a [ 1 ] )

10 #Aqui v e r i f i c a m o s s e a qua nt id ad e de mater ia e mole cula s ão m ai or es que

0 , resumindo s e as l i s t a s não e s t ão v a zia s , p ode r ia s e r usado uma

s i m p l e s compara ç ã o com [ ] , po r ém para f i c a r mai s f á c i l o e ntendimento ,

u t i l i z a m o s a quant idade , para i s s o comparamos a v a r i á v e l de materia , e

usamos um s i n a l i z a d o r ’ and ’ que s i g n i f i c a ’ e ’ , e comparamos a v a r i á v e l

de molecula , o ’ and ’ s i g n i f i c a que s ó e x e c u t a s e ambas as compara ç õ es

deram p o s s i t i v o , caso s e j a n e c e s s a r i o uma ou o utro s e usa ’ o r ’ , mas

n e ss e caso apenas queremos s e ambas forem p o s s i t i v a s .

11 i f ( quantidade_materia > 0) and (quantidade_molecula > 0) :

12 #Sendo ambas maiores de z e ro vamos c r i a r um s e l e t o r a l e a t o r i o en tr e

molecula e materia

Capítulo 2. Desenvolvimento dos jogos 73

13 #Aqui e st amos usando uma da s fun ç õ e s do random , a fun ç ã o r andi n t , que

gera um número a l e a t ó r i o e n tr e o i n i c i a l e o f i n a l passados para fun ç ão ,

n e ss e caso 0 e 1 , ale a to r iam e nt e , sendo e l e para d e f i n i r qual das

l i s t a s v a i s e r usada a p r i m e i r a ou a se gunda

14 t i p o _ a l e a t o r i o = random . r an din t ( 0 , 1 )

15 #Aqui faz em os uma v e r i f i c a ç ã o s e o número g era do a l e a t o r i a m e n t e f o i 0

16 i f tipo_aleatorio == 0:

17 #Se o número f o i 0 , s i g n i f i c a que v a i usar a p r i m e i r a l i s t a , que

estamos usando para r e p r e s e n t a r materia , por i s s o vamos d e f i n i r o t i p o

como materia

18 s e l f . t i p o = "materia "

19 #Aqui v e r i f i c a m o s s e todas as o u tra s v e r i f i c a ç õ e s deram n eg ativ as ,

n e s s e c as o s e f o i 1

20 e l s e :

21 #Sendo 1 d e f i n i m o s o t i p o como m o le c ul a

22 s e l f . t i p o = "molecula"

23 #Aqui vamos p eg ar um d os nomes d entro da l i s t a a l e a t o r i a m e n t e usando

uma fun ç ão do random chamada c hoice , e a l i s t a que va i pegar va i s e r

a l e a t o r i a , usando o t i po que f o i c r ia d o ant erio rmen te

24 s e l f . nome = random . c h oi c e ( s e l f . p aren t ( ) . l i s t a [ t i p o _ a l e a t o r i o ] )

25 #Agora que pegamos o nome a leat o riam e nte , vamos remover e l e da l i s t a ,

para não t e r r e p e t i ç ão , na proxima vez que b u scar um nome , para i s s o

usamos a fun ç ão temove da l i s t a , passando o nome que f o i e s c o l h i d o

anteriormente

26 s e l f . p aren t ( ) . l i s t a [ t i p o _ a l e a t o r i o ] . remove ( s e l f . nome )

28 #Aqui v e r i f i c a m o s s e quan tida de_materia é maior que 0 , e s e a

quantidade_molecula é 0

29 elif ( quantidade_materia > 0) and (quantidade_molecula == 0) :

30 #Caso molecu l a e s t e j a v azia , e materia tenha nomes ainda , vamos

t r a b a l h a r apenas com a p r i me ir a l i s t a , que é a de m at eria . por i s s o

vamos u s ar o c h o i c e com a l i s t a [ 0 ]

31 s e l f . nome = random . c h o i c e ( s e l f . p arent ( ) . l i s t a [ 0 ] )

32 #Vamos re mo ve r o nome da p r i m e i r a l i s t a

33 s e l f . parent ( ) . l i s t a [ 0 ] . remove ( s e l f . nome )

34 #Vamos s e t a r que o t i po vai s er m at er ia

35 s e l f . t i p o = "materia "

37 elif ( quantidade_materia == 0) and (quantidade_molecula > 0) :

38 #Caso materia e s t e j a va z ia , e molecula tenha nomes ainda , vamos

t r a b a l h a r apenas com a segunda l i s t a , que é a de m ole cula . p or i s s o

vamos u s ar o c h o i c e com a l i s t a [ 1 ]

39 s e l f . nome = random . c h o i c e ( s e l f . p arent ( ) . l i s t a [ 1 ] )

40 #Vamos remover o nome da segunda l i s t a

41 s e l f . parent ( ) . l i s t a [ 1 ] . remove ( s e l f . nome )

42 #Vamos s e t a r que o t i po vai s er m olecula

43 s e l f . t i p o = "molecula"

Capítulo 2. Desenvolvimento dos jogos 74

Código 21 – Alterando o inicializador do clicklabel para torna-lo aleatório

2.2.10 Finalizando a interface

Na subsecção anterior alteramos a função de troca de imagem por uma genérica

aleatória ao ser criado a label, com o código identico para todas as funções dos receptores,

nessa subsecção vamos voltar ao QT design para fazer a tela de informações quando dá

uma combinação certa, e uniﬁcar às funções, agua, ferrugem, . . . , em apenas uma única

função mudar_face, para isso vamos voltar clicklabel, selecionar qualquer um deles com o

botão direito e apertar change signals

slots, conforme pode ser observado na ﬁgura 44,

para voltarmos a mudar seus slots já criados, nesse caso vamos usar o - para remover todos

os slots, conforme a ﬁgura 45 e criar no lugar de todas as funções vamos criar a função

mudar_face() e conﬁrmar as mudanças, conforme pode ser observado na ﬁgura 46, e agora

vamos ir no editor de sinais embaixo do windows, como feito na subsecção 2.2.7, para

mudar às ligações existente das funções agua, ferrugem,... para a função mudar_face(),

vamos selecionar um deles, com o botão direito, e apertar selecionar todos, select all,

conforme a ﬁgura 47, e depois de selecionado todos apertamos o botão delete do teclado,

para remover todos as ligações existentes, para poder criar todos novamente utilizando a

seta vermelha, fazendo as ligações de cada clicklabel com ela mesma, utilizando o sinal

click() e o receptor mudar_face(), ﬁcando a interface conforme a ﬁgura 48, tendo apenas as

setas em locais diferentes, e a label jogo da memoria está em vermelho por ter selecionado

ele, para ﬁcar mais visível as labels de cartas.

Capítulo 2. Desenvolvimento dos jogos 75

Figura 44 – Selecionando change signals\slots na clicklabel

Capítulo 2. Desenvolvimento dos jogos 76

Figura 45 – Selecionando a função para deletar usando o sinal de menos

Capítulo 2. Desenvolvimento dos jogos 77

Figura 46 –

Conﬁrmando as mudanças, após ter deletado todas as funções e criado em

sue lugar a função mudar_face

Capítulo 2. Desenvolvimento dos jogos 78

Figura 47 – Selecionando todos os links

Capítulo 2. Desenvolvimento dos jogos 79

Figura 48 – Visualização dos links após deletar e recria-los como mudar_face

2.2.10.1 Criação da nova widget escondido

Nessa sub-subsecção vamos voltar para o editor de widgets, que ﬁca ao lado do

editor de sinais no canto esquerdo superior, criar uma widget para mostrar o informativo

da combinação correta das cartas, para isso vamos na caixa de widgets, encontrado na

esquerda, abrir o container, e arrastar Widget para tela, e selecionar seu tamanho para

condizer com o tamanho de todas as imagens, conforme pode ser observado na ﬁgura 49, e

mudando seu plano de fundo para uma cor diferente, usando o editor de propriedades, na

aba QWidget, mudando o stylesheets, para abrir o editor de estilos, conforme a ﬁgura 50, e

adicionar uma cor de plano de fundo, usando o RGB sendo ele vermelho, verde e azul, para

deﬁnir qual é a cor a ser utilizado, ou usando o mouse para mover o ponteiro para a cor

desejada, nesse caso utilizaremos uma cor cinza com o rgb(170,170,170), conforme pode ser

observado na ﬁgura 51, fazendo a widget ﬁcar conforme a ﬁgura 52, tendo arrumado a cor

vamos promover a Widget para um novo tipo o qual vamos chamar de escondido, conforme

pode ser observado na ﬁgura 53 e54, pois na aplicação essa widget não vai ser visível

até ter uma combinação certa, e adicionar um receptor chamado mudar_informativo(),

Capítulo 2. Desenvolvimento dos jogos 80

conforme pode ser observado na ﬁgura 55, para mudar a imagem baseado em qual o nome

da combinação.

Figura 49 – Criando nova widget

Figura 50 – Abrindo o stylesheet e selecionando mudança de plano de fundo

Capítulo 2. Desenvolvimento dos jogos 81

Figura 51 – Selecionando a cor do plano de fundo com o sistema RGB de cor

Capítulo 2. Desenvolvimento dos jogos 82

Figura 52 –

Visualização da widget após setar sua cor para cinza com o rgb(170,170,170)

Capítulo 2. Desenvolvimento dos jogos 83

Figura 53 – Selecionando a Widget para promove-la

Capítulo 2. Desenvolvimento dos jogos 84

Figura 54 – Criando nova classe especial escondido

Capítulo 2. Desenvolvimento dos jogos 85

Figura 55 – Criando novo sinal mudar_informativo para a classe escondido

2.2.10.2 Criação dos links e a label da widget escondido

Na sub-subsecção anterior fora criado a widget escondido, e trocado sua cor de

fundo para cinza utilizando o rgb(170,170,170), e criado sua função de trocar informativo,

nessa sub-subsecção vamos criar as ligações entre as cartas e a widget escondido e criar uma

label para mostrar a imagem do informativo, selecionado a widget escondido aperte Ctrl +

K e Ctrl + L para mudar quem vai por cima ou por baixo, nesse caso vamos apertar Ctrl +

K para fazer a widget ir por baixo para podermos ver as labels das cartas, conforme pose

ser observado na ﬁgura 56, tendo feito esses passos, vamos ir no editor de sinais, na parte

superior esquerda, para ligar todas às clicklabels, com a widget escondido, conectando o

sinal click() das labels, com o receptor mudar_informativo() da widget, conforme pode

ser observado na ﬁgura 57, ao fazer a ligação em todas as clicklabels, conforme pode ser

oberservado na ﬁgura 58, voltamos ao editor de widgets, no canto superior esquerdo, ao

lado do editor de sinais, selecionamos a widget escondido e apertamos Ctrl + L para

fazer ela voltar para frente, e vamos adicionar uma label para carregar as imagens de

informação, e usando o pixmap no editor de propriedades na aba QLabel, selecionamos

uma das imagens de informativo, qualquer uma serve, já que ela vai ser mudada antes

de mostrar em tela baseado no tipo de combinação, nesse caso vamos pegar ferrugem, a

Capítulo 2. Desenvolvimento dos jogos 86

imagem de marte, e escolhemos para escalar o conteúdo para caber na label, e ajustamos

a label para o tamanho da widget escondido, deixando um espaço na parte inferior para

colocar um botão, conforme pode ser observado na ﬁgura 59

Figura 56 – Visualização da interface após mudar a widget escondido para o fundo

Capítulo 2. Desenvolvimento dos jogos 87

Figura 57 –

Criando os links entre o sinal click da clicklabels e o receptor mu-

dar_informativo da widget escondido

Capítulo 2. Desenvolvimento dos jogos 88

Figura 58 –

Visualização dos links após criar os links entre a clicklabel e o widget escondido

Figura 59 – Criação de uma label comum com uma imagem de informativo

Capítulo 2. Desenvolvimento dos jogos 89

2.2.10.3 Criação de botão na widget escondido e a criação do link entre eles

Na sub-subsecção anterior criamos os links entre as cartas e a widget escondido,

juntamente com a criação de uma label dentro da widget escondido para mostrar a imagem

do informativo, nessa sub-subsecção vamos ﬁnalizar a utilização do Qt Designer, criando

um botão na widget escondido, e fazendo sua ligação com o widget escondido para ocultar

a widget ao ser clicado, para adicionar o botão vamos voltar na caixa de widgets, na

aba buttons, selecionar o pushbutton, colocando abaixo da label de imagem, conforme

pode ser observado na ﬁgura 60, com o botão criado vamos mudar seu conteúdo escrito

para continuar, como se faria na label, e para ﬁcar mais visível também vamos mudar

seu stylesheet, para adicionar uma cor de fundo mais clara, perto do branco, usando

rgb(240,240,240), conforme pode ser obersavado na ﬁgura 61, agora vamos voltar no editor

de sinais, para criar a ligação do botão continuar com o widget escondido, o botão já tem

opção clicked(), portanto não é necessário promovê lo, apenas linkar a função clicked()

do mouse, com a função hide() que serve para esconder a tela do widget escondido, que

não é visível, pois é do nativo QWidget, para isso vamos ter que selecionar que queremos

ver às funções nativas, conforme pode ser observado na ﬁgura 62, tendo selecionado a

opção podemos ver as opções herdadas do QWidget tendo entre elas a função hide(),

conforme pode ser observado na ﬁgura 63, no editor de sinais e receptores, do canto inferior

direito todas as ligações entre sinais e receptores, de uma forma mais visivel que a tela da

aplicação, conforme pode ser obersavo na ﬁgura 64.

Figura 60 – Criação de botão

Capítulo 2. Desenvolvimento dos jogos 90

Figura 61 –

Alteração da cor do botão para branco com o rgb(240,240,240) utilizando o

stylesheet após ter mudado seu texto para continuar

Capítulo 2. Desenvolvimento dos jogos 91

Figura 62 – Habilitando a visualização dos sinais e receptores herdados da QWidget

Capítulo 2. Desenvolvimento dos jogos 92

Figura 63 –

Criação do link entre o sinal clicked do botão e o recptor hide da widget

escondido que fora herdado do QWidget

Figura 64 –

Visualização dos links da interface, juntamente com a aba de sinais e receptores

Capítulo 2. Desenvolvimento dos jogos 93

2.2.11 Criando o terceiro e ultimo código aplicativo.py

Na subsecção anterior fora terminado a interface com a utilização do Qt Designer,

nessa subsecção vamos converter o interface.ui para python, substituir o Ui_MainWindow

pelo atual, e mudar as funções especiﬁcas agua, ferrugem, ... para apenas mudar_face,

vamos criar a classe escondido, para começar novamente temos que converter a aplica-

ção.ui para .py, usando o terminal no local da pasta, usando o comando 7, e copiar o

conteudo Ui_MainWindow para o aplicativo.py, como fora realizado anteriormente na

sub-subsecção 2.2.8.4, sendo importante ter seguido a sequência de conexões entre sinais e

receptores, fazendo todas as mudar_face primeiro e depois todos os mudar_informativo,

para que as conexões ao criar o arquivo python ﬁque em sequência, pois precisamos de que

mude a face antes de mudar informativo, seguindo a sequência certa ele ﬁca conforme o

código 22, com execção do comentário antes do retraslateUi, que fora escrito para identiﬁcar

a parte mencionada da sequencia entre as conexões, seguindo mudar_face primeiro e

depois mudar_informativo, Agora que mudamos o tipo de função para mudar_face(),

podemos excluir todas às funções repetidas, mantendo apenas agua, e mudando o nome

de agua para mudar_face, tendo feito isso no lugar de varias funções repetidas com nomes

diferente dentro da classe clicklabel vai possuir apenas uma função mudar_face, conforme

pode ser observado no código 23, tendo em vista as mudanças de nome para self.nome e

tipo para self.tipo, conforme mencionado na subsecção 2.2.9, agora vamos trabalhar na

criação da nova classe escondido, após clicklabel e antes de MainWindow, começa criando

a função de inicialização e deﬁnindo que a própria widget vai ser escondida, após isso

criamos uma função de pintura pois widgets promovidas não recebem mudanças de cor do

stylesheets, porém não é necessário criar a função, tem vários matérias de apoio para esse

detalhe explicando sobre esse detalhe e disponibilizando o função pronta para arrumar

esse detalhe, como por exemplo os sites (USER7797,2013;ORENSBRULI,2019), depois

da função de pintura para que a cor de plano de fundo funcione, vamos mudar a função de

ocultar, adicionando uma nova instância ao ocultar a widget, que é uma veriﬁcação se

fora encontrado todas as quatro combinações de cartas, resumindo se o jogo de memoria

foi completado, para caso tenha sido vencido, mostrar uma mensagem na tela de parabéns

e fechando o jogo ao ser clicado no botão da mensagem, ou fechado a mensagem, para

entender mais sobre como utilizar o QMessageBox, pode ser observado a documentação

oﬁcial em (QT,h) e também pode ser observado varios materias de apoio na internet caso

o oﬃcial não seja o suﬁciente como por exemplo seja desejado mudar o estilo da caixa

de mensagem, pode ser encontrado em (KOAN,2011), nesse caso estamos criando uma

simples com veriﬁcação se foi fechado ou apertado ok, para isso começamos fazendo a

veriﬁcação se é a ultima combinação, mostramos "Parabens você venceu"no terminal do

python, criamos a caixa de mensagem, deﬁnimos seu titulo para "Parabéns", deﬁnimos a

qual vai ser a mensagem, nesse caso "Parabens você venceu", deﬁnimos qual vai ser o botão

utilizado does padrões nesse caso o close, e então deﬁnimos qual vai ser o botão padrão

Capítulo 2. Desenvolvimento dos jogos 94

que vai ser já pré-selecionado, nesse caso também vamos usar o botão close, tendo criado

já a mensagem vamos capturar qual foi o sinal executado, ao executar vai armazenar na

variável ret, e então veriﬁcamos qual foi o botão selecionado, veriﬁcando se o close foi

selecionado, nesse caso possui apenas um botão close, mas caso possua mais de um botão

pode ser veriﬁcado qual deles foi acionado, fazendo coisas diferentes para cada botão, por

ultimo temos a criação da função receptora slot do mudar_informativo, considerando

que em sua maioria vamos estar trabalhando com o parente da widget escondido, como

realizado para criação do clicklabel aleatoria na sub-subsecção 2.2.8.7, começando com a

veriﬁcação se foi encontrado um conjunto, caso tenha sido mudando a imagem da label

para o nome do conjunto, mudando a widget para visível e então alterando as variáveis de

armazenamento de conjunto para falso e seu nome para vazio, podendo procurar um novo

conjunto depois.

1class Ui_MainWindow( object) :

2de f s etupUi ( s e l f , MainWindow ) :

3i f not MainWindow . objectName ( ) :

4MainWindow . setObjectName ( u"MainWindow")

5MainWindow . r e s i z e ( 5 61 , 546)

6MainWindow . setAutoFillBackground ( F als e )

7s e l f . c e n t r a l w i d g e t = novo_widget ( MainWindow )

8s e l f . c e n t r a l w i d g e t . setObjectName ( u" centralwidget " )

9s e l f . l abe l_ 2 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

10 s e l f . l a b e l _ 2 . setObjectName (u" label_2 " )

11 s e l f . l a b e l _ 2 . setGeometry (QRect (10 , 90 , 121 , 211) )

12 s e l f . l a b e l _2 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

13 s e l f . l a b e l _ 2 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

14 s e l f . l a b el_2 . s e t S c a l e d C o n t e n t s ( True )

15 s e l f . l abe l_ 3 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

16 s e l f . l a b e l _ 3 . setObjectName (u" label_3 " )

17 s e l f . l a b e l _ 3 . setGeometry (QRect (150 , 90 , 121 , 211) )

18 s e l f . l a b e l _3 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

19 s e l f . l a b e l _ 3 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

20 s e l f . l a b el_3 . s e t S c a l e d C o n t e n t s ( True )

21 s e l f . l abe l_ 5 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

22 s e l f . l a b e l _ 5 . setObjectName (u" label_5 " )

23 s e l f . l a b e l _ 5 . setGeometry (QRect (430 , 90 , 121 , 211) )

24 s e l f . l a b e l _5 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

25 s e l f . l a b e l _ 5 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

26 s e l f . l a b el_5 . s e t S c a l e d C o n t e n t s ( True )

27 s e l f . l abe l_ 6 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

28 s e l f . l a b e l _ 6 . setObjectName (u" label_6 " )

29 s e l f . l a b e l _ 6 . setGeometry (QRect (10 , 320 , 121 , 211) )

30 s e l f . l a b e l _6 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

31 s e l f . l a b e l _ 6 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

32 s e l f . l a b el_6 . s e t S c a l e d C o n t e n t s ( True )

33 s e l f . l abe l_ 7 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

Capítulo 2. Desenvolvimento dos jogos 95

34 s e l f . l a b e l _ 7 . setObjectName (u" label_7 " )

35 s e l f . l a b e l _ 7 . setGeometry (QRect (150 , 320 , 121 , 211) )

36 s e l f . l a b e l _7 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

37 s e l f . l a b e l _ 7 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

38 s e l f . l a b el_7 . s e t S c a l e d C o n t e n t s ( True )

39 s e l f . l abe l_ 8 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

40 s e l f . l a b e l _ 8 . setObjectName (u" label_8 " )

41 s e l f . l a b e l _ 8 . setGeometry (QRect (290 , 320 , 121 , 211) )

42 s e l f . l a b e l _8 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

43 s e l f . l a b e l _ 8 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

44 s e l f . l a b el_8 . s e t S c a l e d C o n t e n t s ( True )

45 s e l f . l abe l_ 9 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

46 s e l f . l a b e l _ 9 . setObjectName (u" label_9 " )

47 s e l f . l a b e l _ 9 . setGeometry (QRect (430 , 320 , 121 , 211) )

48 s e l f . l a b e l _9 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

49 s e l f . l a b e l _ 9 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

50 s e l f . l a b el_9 . s e t S c a l e d C o n t e n t s ( True )

51 s e l f . l abe l_ 4 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

52 s e l f . l a b e l _ 4 . setObjectName (u" label_4 " )

53 s e l f . l a b e l _ 4 . setGeometry (QRect (290 , 90 , 121 , 211) )

54 s e l f . l a b e l _4 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

55 s e l f . l a b e l _ 4 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

56 s e l f . l a b el_4 . s e t S c a l e d C o n t e n t s ( True )

57 s e l f . l a b e l = QLabel ( s e l f . c e n t r a l w i d g e t )

58 s e l f . l a b e l . setObjectName ( u"label" )

59 s e l f . l a b e l . setGeometry ( QRect ( 10 , 10 , 541 , 6 1) )

60 s e l f . l a b e l . setTextFormat (Qt . AutoText )

61 s e l f . l a b e l . setWordWrap ( F a lse )

62 s e l f . l a b e l . s e t T e x t I n t e r a c t i o n F l a g s ( Qt . N oT ex tI nt er ac tio n )

63 s e l f . w id ge t = e scon dido ( s e l f . c e n t r a l w i d g e t )

64 s e l f . widget . setObjectName ( u" widget " )

65 s e l f . widget . s e t E nabled ( True )

66 s e l f . widget . setGeometry ( QRect (1 0 , 90 , 541 , 441) )

67 s e l f . widge t . s e t S t y l e S h e e t ( u" background -color : rgb(170 , 170 , 170) ;" )

68 s e l f . pushButton = QPushButton ( s e l f . widg et )

69 s e l f . pushButton . setObjectName ( u"pushButton")

70 s e l f . pushButton . setGeometry ( QRect ( 2 20 , 4 10 , 111 , 23) )

71 s e l f . pushButton . s e tCu r sor ( QCursor ( Qt . PointingHandCursor ) )

72 s e l f . pushButton . s e t S t y l e S h e e t ( u"background -color: rgb (240 , 240,

240);" )

73 s e l f . l a b el_10 = QLabel ( s e l f . widget )

74 s e l f . label_10 . setObjectName ( u" label_10" )

75 s e l f . label_10 . setGeometry ( QRect (0 , 0 , 541 , 401) )

76 s e l f . label_10 . setPixmap (QPixmap( u ":/ informativo / ferrugem " ) )

77 s e l f . l a b el _ 1 0 . s e t S c a l e d C o n t e n t s ( True )

78 MainWindow . s et Ce nt ralWidget ( s e l f . c e n t r a l w i d g e t )

Capítulo 2. Desenvolvimento dos jogos 96

80 #p art e impor tan te mencionada , como pode s e r observada ,

p ri meir a me nte f a z a c one x ão e n t r e mudar_face e d e p o i s muda r_i nfo rma tiv o

81 s e l f . r e t r a n s l a t e U i (MainWindow )

82 s e l f . la b e l _ 2 . c l i c k . connect ( s e l f . la b e l _ 2 . mudar_face )

83 s e l f . la b e l _ 3 . c l i c k . connect ( s e l f . la b e l _ 3 . mudar_face )

84 s e l f . la b e l _ 4 . c l i c k . connect ( s e l f . la b e l _ 4 . mudar_face )

85 s e l f . la b e l _ 5 . c l i c k . connect ( s e l f . la b e l _ 5 . mudar_face )

86 s e l f . la b e l _ 6 . c l i c k . connect ( s e l f . la b e l _ 6 . mudar_face )

87 s e l f . la b e l _ 7 . c l i c k . connect ( s e l f . la b e l _ 7 . mudar_face )

88 s e l f . la b e l _ 8 . c l i c k . connect ( s e l f . la b e l _ 8 . mudar_face )

89 s e l f . la b e l _ 9 . c l i c k . connect ( s e l f . la b e l _ 9 . mudar_face )

90 s e l f . la b e l _ 2 . c l i c k . connect ( s e l f . widget . mudar_informativo )

91 s e l f . la b e l _ 3 . c l i c k . connect ( s e l f . widget . mudar_informativo )

92 s e l f . la b e l _ 4 . c l i c k . connect ( s e l f . widget . mudar_informativo )

93 s e l f . la b e l _ 5 . c l i c k . connect ( s e l f . widget . mudar_informativo )

94 s e l f . la b e l _ 6 . c l i c k . connect ( s e l f . widget . mudar_informativo )

95 s e l f . la b e l _ 7 . c l i c k . connect ( s e l f . widget . mudar_informativo )

96 s e l f . la b e l _ 8 . c l i c k . connect ( s e l f . widget . mudar_informativo )

97 s e l f . la b e l _ 9 . c l i c k . connect ( s e l f . widget . mudar_informativo )

98 s e l f . pushButton . c l i c k e d . connect ( s e l f . widget . hide )

100

101

102 QMetaObject . connectSlotsByName ( MainWindow)

103 # setupUi

104

105 de f r e t r a n s l a t e U i ( s e l f , MainWindow ) :

106 MainWindow . setWindowTitle ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,

u"MainWindow" , None ) )

107 s e l f . l a b e l _ 2 . s e t T e x t ( "" )

108 s e l f . l a b e l _ 3 . s e t T e x t ( "" )

109 s e l f . l a b e l _ 5 . s e t T e x t ( "" )

110 s e l f . l a b e l _ 6 . s e t T e x t ( "" )

111 s e l f . l a b e l _ 7 . s e t T e x t ( "" )

112 s e l f . l a b e l _ 8 . s e t T e x t ( "" )

113 s e l f . l a b e l _ 9 . s e t T e x t ( "" )

114 s e l f . l a b e l _ 4 . s e t T e x t ( "" )

115 s e l f . l a b e l . s et Te x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<html

><head /><body ><span style =\" font - size :12 pt; font -

weight :600;\" > Jogo da memoria : <span style

=\" font -size :10 pt; font - weight :600;\" > Combine as cartas de estrutura

molecular com os materiais correspondentes </body ></html >" ,

None ) )

116 s e l f . pushButton . s et Te xt ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"

Continuar" , None ) )

117 s e l f . l a b e l _ 1 0 . s e t T e x t ( "" )

118 # r e t r a n s l a t e U i

Capítulo 2. Desenvolvimento dos jogos 97

Código 22 –

Nova classe Ui_MainWindow gerada pelas mudanças da interface, com

comentário da parte a ser prestado atenção

1#Criando a c l i c k l a b e l que s e baseado na QLabel , que f o i c r i a d o no QT Design

2class c l i c k l a b e l ( QLabel ) :

3#Criando a fun ç ão de i n i c i a l i z a ção , que se executa cada vez que o

programa c r i a uma nova l a b e l u t i l i z a n d o o c l i c k l a b e l , e setando quem é

seu pa ren te , n e s s e c aso QWidget

4de f __init__ ( s e l f , parent=QWidget ) :

5#Gar an tindo que v a i f u nc io nar , e v a i a c i o n a r todas as v e z e s com o s u per

( )

6super ( ) . __init__ ( p aren t )

8#Aqui e st am os vendo a q u an tid a de de nomes d entro da p r i m e i r a l i s t a ,

se ndo q uan tida de de m at er ia , usando l e n ( ) , que con ta q ua n tidades de

i t e n s dentro de o b j et o s no python , ent ã o v e r i f i c a m o s a p o s i ç ão 0 da

l i s t a , l i s t a [ 0 ] , consi d e rando que l i s t a e s t á em seu parente , por i s s o

s e l f . p a rent ( ) . l i s t a [ 0 ] , em linguagem de programa ção é normal come ç ar as

c ontag en s em 0 , p or i s s o a p r i m e i r a p o s i ç ão de uma l i s t a é 0 em vez de 1

9quantidade_materia = l e n ( s e l f . p a rent ( ) . l i s t a [ 0 ] )

10 #Aqui estamos vendo a quanti dade de nomes dentro da segunda l i s t a ,

sendo quantidade de m o lecula

11 quantidade_molecula = l e n ( s e l f . p a r e nt ( ) . l i s t a [ 1 ] )

13 #Aqui v e r i f i c a m o s s e a qua nt id ad e de mater ia e mole cula s ão m ai or es que

0 , resumindo s e as l i s t a s não e s t ão v a zia s , p ode r ia s e r usado uma

s i m p l e s compara ç ã o com [ ] , po r ém para f i c a r mai s f á c i l o e ntendimento ,

u t i l i z a m o s a quant idade , para i s s o comparamos a v a r i á v e l de materia , e

usamos um s i n a l i z a d o r ’ and ’ que s i g n i f i c a ’ e ’ , e comparamos a v a r i á v e l

de molecula , o ’ and ’ s i g n i f i c a que s ó e x e c u t a s e ambas as compara ç õ es

deram p o s s i t i v o , caso s e j a n e c e s s a r i o uma ou o utro s e usa ’ o r ’ , mas

n e ss e caso apenas queremos s e ambas forem p o s s i t i v a s .

14 i f ( quantidade_materia > 0) and (quantidade_molecula > 0) :

15 #Sendo ambas maiores de z e ro vamos c r i a r um s e l e t o r a l e a t o r i o en tr e

molecula e materia

16 #Aqui e st amos usando uma da s fun ç õ e s do random , a fun ç ã o r andi n t , que

gera um número a l e a t ó r i o e n tr e o i n i c i a l e o f i n a l passados para fun ç ão

, n e ss e caso 0 e 1 , ale a to r iam e nte , sendo e l e para d e f i n i r qual das

l i s t a s v a i s e r usada a p r i m e i r a ou a se gunda

17 t i p o _ a l e a t o r i o = random . r an din t ( 0 , 1 )

18 #Aqui faz em os uma v e r i f i c a ç ã o s e o número g era do a l e a t o r i a m e n t e f o i 0

19 i f tipo_aleatorio == 0:

20 #Se o número f o i 0 , s i g n i f i c a que v a i usar a p r i m e i r a l i s t a , que

estamos usando para r e p r e s e n t a r materia , por i s s o vamos d e f i n i r o t i p o

como materia

21 s e l f . t i p o = "materia "

Capítulo 2. Desenvolvimento dos jogos 98

22 #Aqui v e r i f i c a m o s s e todas as o u tra s v e r i f i c a ç õ e s deram n eg ativ as ,

n e s s e c as o s e f o i 1

23 e l s e :

24 #Sendo 1 d e f i n i m o s o t i p o como m o le c ul a

25 s e l f . t i p o = "molecula"

26 #Aqui vamos p eg ar um d os nomes d entro da l i s t a a l e a t o r i a m e n t e usando

uma fun ç ão do random chamada c hoice , e a l i s t a que va i pegar va i s e r

a l e a t o r i a , usando o t i po que f o i c r ia d o ant erio rmen te

27 s e l f . nome = random . c h oi c e ( s e l f . p aren t ( ) . l i s t a [ t i p o _ a l e a t o r i o ] )

28 #Agora que pegamos o nome a leat o riam e nte , vamos remover e l e da l i s t a ,

para não t e r r e p e t i ç ão , na proxima vez que b u scar um nome , para i s s o

usamos a fun ç ão temove da l i s t a , passando o nome que f o i e s c o l h i d o

anteriormente

29 s e l f . p aren t ( ) . l i s t a [ t i p o _ a l e a t o r i o ] . remove ( s e l f . nome )

31 #Aqui v e r i f i c a m o s s e quan tida de_materia é maior que 0 , e s e a

quantidade_molecula é 0

32 elif ( quantidade_materia > 0) and (quantidade_molecula == 0) :

33 #Caso molecu l a e s t e j a v azia , e materia tenha nomes ainda , vamos

t r a b a l h a r apenas com a p r i me ir a l i s t a , que é a de m at eria . por i s s o

vamos u s ar o c h o i c e com a l i s t a [ 0 ]

34 s e l f . nome = random . c h o i c e ( s e l f . p a rent ( ) . l i s t a [ 0 ] )

35 #Vamos re mo ve r o nome da p r i m e i r a l i s t a

36 s e l f . parent ( ) . l i s t a [ 0 ] . remove ( s e l f . nome )

37 #Vamos s e t a r que o t i po vai s er m at er ia

38 s e l f . t i p o = "materia "

40 elif ( quantidade_materia == 0) and (quantidade_molecula > 0) :

41 #Caso materia e s t e j a va z ia , e molecula tenha nomes ainda , vamos

t r a b a l h a r apenas com a segunda l i s t a , que é a de m ole cula . p or i s s o

vamos u s ar o c h o i c e com a l i s t a [ 1 ]

42 s e l f . nome = random . c h o i c e ( s e l f . p a rent ( ) . l i s t a [ 1 ] )

43 #Vamos remover o nome da segunda l i s t a

44 s e l f . parent ( ) . l i s t a [ 1 ] . remove ( s e l f . nome )

45 #Vamos s e t a r que o t i po vai s er m olecula

46 s e l f . t i p o = "molecula"

48 #Criand o o s i n a l que f o i c r i a d o no e d i t o r de s i n a i s no QT Desi gn er , é

i mp orta n te t e r o mesmo nome , n e s s e c a so c l i c k .

49 c l i c k = S i g n a l ( )

51 #Mudando a f un ç ã o padr ã o do c l i c k do mouse , par a f a z e r a l g o e x t r a .

52 de f mousePressEvent ( s e l f , e v ent ) :

53 #Adicionando que apó s c l i c a r com o mouse e l e emita o s i n a l c l i c k .

54 s e l f . c l i c k . emit ( )

56 @Slot ( )

Capítulo 2. Desenvolvimento dos jogos 99

57 de f mudar_face ( s e l f ) :

58 #Aqui criamos o caminho para imagem , u t i l i z a n d o as v a r i á v e i s d e f i n i d a s

acima , para i s s o usamos de t e x t o + v a r i á v e l , n e s s e c as o usamos + pa ra

c o nc ate nar d o i s t e x t o s s epa r ad o s , ou c o n cat ena r t e x t o com v a r i á v e l ,

n e ss e cas o ":/ " + t i p o va i r e s u l t a r em " : / m ateria " e ao u t i l i z a r +"/"+nome

v ai co nc a tenar o r e s u l t a d o a n t e r i o r com " / agua " , r e s u l ta n do em " : /

materia / agua " , que é o caminho para a imagem de agua

59 caminho = ":/"+ s e l f . t i p o+"/"+s e l f . nome

61 #Vamos u sar o QPixmap , usando o caminho c r i a d o a n te r iormente , usando o

’ u ’ a n te s do t e x t o p ar a d e f i n i r , que v a i s e r um t e x t o uni co de , pa ra

a c e i t a r acentua ç õ e s e o ut ros c a r a c t e r e s e s p e c i a i s sem problemas , usando

assim o u " " e concatenando o caminho com o u""+ caminho

62 pixmap = QPixmap( u""+caminho )

63 #Aqui chamamos a p r ó p r i a l a b e l com o s e l f e d e f i n i m o s uma nova imagem

usando o pixmap c r i a d o a n te r iormente , ao c on tr á r i o de ant es , nã o

prec i s a mos f a z e r v e r i f i c a ç ão , e vamos apenas mudar a f a c e

64 s e l f . setPixmap ( pixmap )

66 #Criamos o c u r s o r como normal

67 c u r s o r = QCursor ( Qt . ArrowCursor )

68 #Aqui chamamos a p r ó p r i a l a b e l com o s e l f e d e f i n i m o s o novo c u r s o r

criado

69 s e l f . s e tC ur so r ( c u r s o r )

71 #Aqui chamamos a pr ó p r ia l a b e l e bloqueamos s eus s i n a i s , para que não

s e p os sa mais c l i c a r enquanto e s t á com a f a c e para cima .

72 s e l f . b l o c k S i g n a l s ( True )

74 #Vamos v e r i f i c a r se j á e x i s t e uma p r im e ir a ca r t a no par e n t e da l a be l ,

por i s s o chamamos a l a b e l com s e l f usamos o ponto para i d e n t i f i c a r sua

l i g a ç ão , e chamamos s eu parent e e v e r i f i c a m o s se sua v a r i á v e l

tipo_primeira_carta está vazia

75 i f ( s e l f . p a rent ( ) . t i p o _primeira_ c a r t a == "" ) :

76 #Caso a v a r i á v e l e s t e j a v az i a , qu er d i z e r que nã o t e v e uma p r i m e i r a

c a rt a ainda , ent ão vamos a d i c i o n a r o s v a l o r e s de ssa l a b e l como p r im ei ra

carta

77 #Aqui e stamos passando o caminho da l a b e l para o p arente na v a r i á v e l

primeira_carta

78 s e l f . parent ( ) . p r i meira _ c arta = s e l f

79 #Aqui estamos mudando a v a r i a v e l tipo_prim ei ra_carta para agua

80 s e l f . parent ( ) . ti p o _ p rimeira_ca r t a = s e l f . nome

81 #Aqui s e v e r i f i c a s e o p r im e ir o i f d er f a l s o , ne ss e c a s o não e s t i v e r

v az i o , s e o t i p o da p r i m e i r a c a r t a é agua

82 elif ( s e l f . parent ( ) . ti p o _ p rimeira_ca r t a == s e l f . nome ) :

83 #Caso o t i p o s e j a agua , qu er d i z e r que a p r i m e i r a c a r t a e r a do t i p o

agua também, portanto fazendo um conjunto

Capítulo 2. Desenvolvimento dos jogos 100

84 #Aqui e stamos mudando o v a l o r da v a r i á v e l c onjunto do p a rente pa ra

v e rda de iro , achou uma combina ç ã o

85 s e l f . parent ( ) . conjunto = True

86 #Aqui e stamos mudando o v a l o r da v a r i á v e l conjunto_nome do p aren te

para agua

87 s e l f . parent ( ) . conjunto_nome = s e l f . nome

88 #Aqui e stamos aumentando o v a l o r da v a r i á v e l c on ta do r_ co nj unto do

p arent e em 1 , p o i s achou uma combina ç ã o

89 s e l f . parent ( ) . contador_conjunto += 1

90 #Aqui e st am os mudando o v a l o r da p r i m e i r a c a r t a novamente para v a zi a ,

p o i s achou um par , tem que a ch ar outro par

91 s e l f . parent ( ) . p r i meira _ c arta = ""

92 #Aqui e st am os mudando o v a l o r do t i p o da p r i m e i r a c a r t a novamente

pa ra vazia , p o i s achou um par , tem que a cha r outro par

93 s e l f . parent ( ) . tip o _ p r imeira_car t a = ""

94 #Aqui s e não pa ssa r em nenhumas das v e r i f i c a ç õ es , resumindo caso , não

e s t e j a vazio , nem s e j a uma combina ç ão , resumindo duas c a r t a s de t i p o s

diferentes

95 e l s e :

96 #Agora que as c a rt a s foram e s c o l h i d a s erradas , temos que v o l ta r a

f a c e para fundo , a pa rte de t r ás , que i n i c i a l m e n t e tinha , por ém temos

que d e i x a r por um tempo p ara poderem v er q ua l c a r t a e r á , e enqua nto se

espera , temos que i m p edir que c o n tinue virando ou t ra s c arta s , para i s s o

vamos b l oq u ear t odos os s i n a i s , a t é d e s v i r a r as c a r t a s .

97 #Aqui u t i l i z a m o s f o r que s i g n i f i c a para cada , n e ss e c aso para cada

l a b e l no par e n t e de s s e o b j e t o , s e l f . p a rent ( ) , ache seu s f i l h o s que sejam

l a b e l s , . f i n d C h i l d r e n ( QLabel ) , como é mais de um f i l h o temos que

u t i l i z a r o f or , par a t r a b a l h a r com cada l a b e l

98 f o r l a b e l i n s e l f . p arent ( ) . f i n d C h i l d r e n ( QLabel ) :

99 #Aqui v e r i f i c a m o s s e a l a b e l do p are nte e s t á com o c u r so r de

po n t eiro , que s i g n i f i c a que é a p art e de t r ás , e pode s e r c l i c a d o .

100 i f l a b e l . c u r s o r ( ) == QCursor ( Qt . Pointin gHandCur sor ) :

101 #Caso s e j a o c u r s o r de p o nte iro , b l o q u e i e s e u s s i n a i s .

102 l a b e l . b l o c k S i g n a l s ( True )

103

104 #Criamos um c i c l o ( loop ) para p a ss ar o tempo , d e f i n i n d o u t i l i z a n d o

QEventLoop ( )

105 lo op = QEventLoop ( )

106 #Tendo c r i ad o o l oop u t i l i z a m o s o QTimer para f a z e r um c i c l o ú nico ,

s i n g l e S h o t de 500 m ili segund os , e d e po is e n c e r r a r o l oop .

107 QTimer . s i n g l e S h o t ( 500 , loop . q u i t )

108 #Aqui e xec uta mos o loo p , pa ra p a s s a r 500 m i l i s e g u n d o s a n t e s de

co ntin uar a usar o a p l i c a t i v o

109 loo p . exec_ ( )

110

111 #Agora ap ó s o l o op de 500 m i l i se gu ndo s , vamos v i r a r a p r i m e i r a c a r t a

e a segunda c a r ta de v o l t a para t r á s , vamos c a r r e g a r a imagem de fundo

Capítulo 2. Desenvolvimento dos jogos 101

no pixmap

112 pixmap = QPixmap( u":/ imagens /fundo_carta " )

113 #Aqui d e f i n i m o s a p r ó p r i a l a b e l de v o l t a para o fu ndo

114 s e l f . setPixmap ( pixmap )

115 #Aqui d e f i n i m o s a l a b e l que e s t á armazenada no seu p a re n t e d e ntro do

p r i m e i r a c ar t a , de v o l t a para o f undo

116 s e l f . parent ( ) . p r i meira _ c arta . setPixmap ( pixmap )

117

118 #Aqui c ri amos um c u r s o r de p o n t e i r o

119 c u r s o r = QCursor ( Qt . Po inting HandCurs or )

120 #Aqui d e f i n i m os a pr ó p r i a l a b e l de v o l t a pa ra p o n t e i r o

121 s e l f . s e tC ur so r ( c u r s o r )

122 #Aqui d e f i n i m o s a l a b e l que e s t á armazenada no seu p a re n t e d e ntro do

p r i m e i r a c ar t a , de v o l t a para p o n t e i r o

123 s e l f . p arent ( ) . p r im ei r a _ca rta . s e tC ur so r ( c u r s o r )

124

125 #Aqui vamos f a z e r o mesmo f o r de a n tes s ó que n es s e caso para

de sblo quea r a a p l i c a ç ão

126 f o r l a b e l i n s e l f . p arent ( ) . f i n d C h i l d r e n ( QLabel ) :

127 i f l a b e l . c u r s o r ( ) == QCursor ( Qt . Pointin gHandCur sor ) :

128 #Caso s e j a o c u r s o r de p o nte iro , d e s b l o q u e i e s e u s s i n a i s .

129 l a b e l . b l o c k S i g n a l s ( F als e )

130

131 #Apó s t e r mudado todos de v o l ta ao normal , vamos v o l t a r as v ar i á v e i s

do p a r en t e da l a b e l p ar a v a z i o

132 s e l f . parent ( ) . p r i meira _ c arta = ""

133 #Def in im os a v a r i á v e l do p arente des sa l a b e l chamado

tipo_primeira_carta de volta para vazio

134 s e l f . parent ( ) . tip o _ p r imeira_car t a = ""

Código 23 –

Classe clicklabel arrumado com a utilização dos self e com uma única função

mudar_face

1#Aqui estamos c ria n do a widget escond ido , baseado em QWidget

2class e sco ndid o ( QWidget ) :

3#Criando a fun ç ão de i n i c i a l i z a ção , que se executa cada vez que o

programa c r i a uma nova widg et esc ondi do , e d e f i n i n d o quem é seu pa re nt e ,

n e s s e c as o é o u tro QWidget

4de f __init__ ( s e l f , parent=QWidget ) :

5#Gar an tindo que v a i f u nc io nar , e v a i a c i o n a r todas as v e z e s com o s u per

( )

6super ( ) . __init__ ( p aren t )

7#Aqui e stamos d e f i n i n d o que a w id ge t e sco ndido é para e s t a r es con dida ,

para i s s o usamos a fun ç ão setHidden passando o par âmetro True , para que

quando f o r c r i a d o a t e l a e s t e j a e sco ndi da

8s e l f . setHidden ( True )

Capítulo 2. Desenvolvimento dos jogos 102

10 #Essa fun ç ão mo d if i ca o e f e i t o de pintu r a , p o i s widgets promovidas não

ace ita m pl ano de fundo , por i s s o p r e c i s a −s e mudar s ua fun ç ã o n ati v a , não

p re ci sa ndo mexer , tendo em vá r i o s l u g a r e s seu c ó d ig o pron to .

11 de f p aintE vent ( s e l f , pe ) :

12 o = QStyleOption ()

13 o . init From ( s e l f )

14 p = QPainter ( s e l f )

15 s e l f . s t y l e ( ) . drawPrimitive ( QStyle . PE_Widget , o , p , s e l f )

17 #Essa fun ç ã o v a i m o d i f i c a r o e f e i t o de escon der , que o c o r r e ao c l i c a r

no bot ã o c o n ti n uar , n e s s e c a so vamos ape nas mudar e l e para c as o t enha

completado todas as combina ç õ e s mostre um popup com parab é ns voc ê venceu

, e ao c on fir mar o popup f e c h e o j o go

18 de f hideEvent ( s e l f , even t ) :

19 #Aqui v e r i f i c a m o s s e a v a r i a v e l co ntado r_con junto do s eu pare nt e

novo_widget c he go u a 4 , r e pr es en ta nd o achou t odas as combina ç õ e s poss í

veis

20 i f ( s e l f . p a rent ( ) . contado r_conjunto == 4) :

21 #Caso t en ha achado , mo str a na t e l a do t e r m i n a l Parab é ns voc ê v enc eu

22 p r i n t (u" Parabéns você venceu" )

23 #Aqui criamos um popup de mensagem

24 msgBox = QMessageBox ( )

25 #Aqui d e f i n i m o s o t í t u l o do popup de mensagem

26 msgBox . setWi ndowTitle ( u"Parab éns" )

27 #Aqui d e f i n i m o s q ua l a mensagem do popup de mensagem

28 msgBox . s etText ( u"Parabéns você venceu " )

29 #Aqui d e f i n i m o s q ua l o bo t ão do popup de mensagem

30 msgBox . s et Stan dardB utton s ( QMessageBox . C lose )

31 #Aqui d e f i n i m o s q ua l o bo t ão do popup de mensagem é o pad r ão , p ara

c as o a p e r t e ESC, Ent er , Spa ce no t e c l a d o , a c i o n e o bot ã o

32 msgBox . se tDef ault Butt on ( QMessageBox . Close )

33 #Aqui v e r i f i c a m o s s e a mensagem f o i executada , no c aso acionad o algum

bot ão

34 r e t = msgBox . exec_ ( )

35 #Aqui v e r i f i c a m o s s e o bot ão a cion ado f o i Close

36 i f r e t == QMessageBox . Close :

37 #Caso t enha s i d o en ce rr am os o programa

38 sy s . e x i t ( )

40 #Aqui criamos o r e c e p t o r mudar_informativo para mudar q ual a imagem

basea do em q ual f o i a combina ç ã o

41 @Slot ( )

42 de f mudar_informativo ( s e l f ) :

43 #Aqui v e r i f i c a m o s s e a v a r i á v e l c onj unto do seu p arente novo_widget , é

True , no c a s o v e r dade i r o , é um conjunto

44 i f ( s e l f . p a rent ( ) . conjunto ) :

45 #Se f o r um co nju nt o , d e f i n i m o s o caminho p ara imagem , n e s s e c a so

Capítulo 2. Desenvolvimento dos jogos 103

sabemos que se u p r e f i x o v ai s e r in forma tivo , e s eu nome e s t á armazenado

no s eu pare nt e na v a r i á v e l conjunto_nome , por i s s o que é i mp or ta nte t e r

nomes i g u a i s

46 pixmap = QPixmap( u" :/ informativo /"+s e l f . parent ( ) . conjunto_nome )

47 #Aqui d e f i n i m o s a imagem p ara o s eu f i l h o l a b e l , n e s s e c a s o pas samo s

apenas Chi ld em vez de C hildren p o i s é a penas um f i l h o que queremos ,

usamos f i n d C h i l d ( QLabel ) , como nã o temos o utra l a b e l dent r o da wid ge t

escon d ido , não pre c i s a mos d e f i n i r seu nome , mas c a s o houvesse mais de

uma l a b e l , t e r í amos que p a s sa r d o i s par â metros , a l ém de seu t i p o QLabel ,

p a ss a r í amos seu nome , n e s s e ca so la be l_ 10 , f i c a n d o s e l f . f i n d C h i l d (

QLabel , " l abel_10 " )

48 s e l f . f i n d C h i l d ( QLabel ) . setPixmap ( pixmap )

49 #Aqui apó s t e r mudado o sua imagem de info r mati v o , vamos d e f i n i r que

não s e j a mais escondid a , resumindo apare ç a na t e l a

50 s e l f . setHidden ( F al s e )

51 #Aqui mudamos novamente o conjunto para Falso , p o is j á v e r i f i c o u ,

e ss e , pa ra e s p e r a r p e lo pr ó ximo c onjunto

52 s e l f . parent ( ) . conjunto = Fal s e

53 #Aqui mudamos novamente o nome do c on junto pa ra v azio , p o i s j á

v e r i f i c o u e s se , para e s p e r a r p e l o pr ó ximo c onjunto

54 s e l f . parent ( ) . conjunto_nome = ""

Código 24 –

Criação da classe escondido, deﬁnindo sua inicialização oculta e alteração da

função de colorir, conforme encontrado em (USER7797,2013), alteração da

função de esconder, e criação do receptor mudar_informativo

2.2.12 Arrumando últimos detalhes para criação do executável

Na Subsecção anterior foi convertido a interface do qt designer para python,

substituindo o anterior encontrado no aplicativo.py, fora também alterado a classe clicklabel

para a utilização de apenas o mudar_face, após foi realizado a criação da classe escondido,

terminando todas as instâncias de códigos, nessa subsecção vamos arrumar os imports

generalizados com a utilização do * qual foram criados na sub-subsecção 2.2.8.4, para

somente os utilizados na aplicação, tornando o programa mais leve e rápido, para isso vamos

remover os imports e executar o programa no geany utilizando o F5, para veriﬁcar o que está

faltando e comparar em qual biblioteca se encontra, observando qual o error apresentado

no terminal do python, conforme pode ser observado na ﬁgura 65, tendo observado qual foi

o erro encontrado, veriﬁcamos em qual biblioteca se encontra o item faltante, na ﬁgura 65

está faltando o Qwidget para isso veriﬁcamos os sites oﬃciais das bibliotecas do pyside2

encontradas, em (QT,a;QT,b;QT,d), para saber de qual biblioteca o QWidget se

encontra, tendo encontrado fazemos o import correto do QWidgete executamos o código

novamente para ver qual outro recurso está faltando importar, conforme pode ser observado

na ﬁgura 66, tendo observado qual o recurso faltante, novamente procura-se no site da

Capítulo 2. Desenvolvimento dos jogos 104

documentação, até conseguir executar o programa como um todo sem erros até vence-lo,

deixando os importes de recursos parecido com o código 25, tendo possível mudança na

sequencia das importações, porém não em sua quantidade ou recursos, completando as

importações especiﬁcas, o código ﬁcaras conforme o código 26, ao executar ele vamos poder

jogar e fazer as combinações, tendo como exemplos algumas imagens do jogo funcionando

na ﬁgura 67 onde se encontra a tela ao ter acertado 3 combinações, faltando completar a

ultima, tendo em vista que as possições das cartas são aleatorio, portanto provavelmente

vai ser diferente, quando for executado, outro exemplo de selecionamente das combinações

de gás carbonico, abrindo a imagem de informativo, conforme a ﬁgura 68, e por ﬁm a

ﬁgura 69 onde se encontra a mensagem de vitoria, parabenizando por vencer o jogo, ao

veriﬁcar tudo funcionando corretamente, vamos voltar no terminal para transformar o

aplicativo.py em um executavel sozinho sem necessidade de arquivos extras, para isso vamos

usar o PyInstaller que fora instalado e mencionado na secção 2.1, podendo veriﬁcar alguns

exemplos de utilização em vários sites como o (HELTONBIKER,2011), tendo incluindo

até mesmo na própria documentação do QT em (QT,o), tendo visto como funciona vamos

abrir o terminal e indo até o local da pasta, vamos executar o comando 27, esse comando

vai criar um executável, dentro da pasta dist, que vai ser criada ao executar esse comando,

sendo no o nome do executável deﬁnido em –name=”Meu_aplicativo”, o arquivo que vai

ser transformado em executável se encontra no ﬁnal do comando aplicativo.py, –oneﬁle

é onde deﬁne se queremos um arquivo sozinho, ou –onedir para deﬁnir que queremos

uma pasta com todos os arquivos junto do executável, –noconﬁrm usamos para não fazer

perguntas após executar o comando, e –hidden-import PySide2.QtXml é usado para

importar a biblioteca QtXml do PySide2 que o pyinstaller precisa, e ocasiona erros, por

não ser encontrado, tendo como referencia em (MSFRIESE,2018) para arrumar o erro,

adicionando o hidden-import no comando, não precisamos adicionar arquivos extras para as

imagens por utilizarmos o QResource System sendo ele o arquivo unico.qrc que convertemos

para recursos.py, para entender melhor pode ser observado em (FITZPATRICK,b), no

programa criado para o jogo, não deﬁnimos, icones ou outras coisas para o jogo, porém é

possivel crialos normalmente, tendo tutoriais na internet como no site (FITZPATRICK,

a), se for feito isso no windows vai ter criado um arquivo .exe que funciona em qualquer

computador que rode arquivos .exe, sem precisar instalar ou ter o Python no computador,

com isso terminamos de criar o jogo da memória, do começo ao ﬁm passo a passo, na

próxima secção vamos criar o jogo de álgebra linear.

Capítulo 2. Desenvolvimento dos jogos 105

Figura 65 –

Visualização do erro de importação do QWidget após removido as linhas de

import

Figura 66 –

Visualização do erro de importação do QLabel após removido as linhas de

import e adicionado o import do QWidget

1#Importando os o b j e t o s do PySide2 u t i l i z a d o s no programa , ∗simboliza tudo

em python , n e ss e caso vamos e s p e c i f i c a r qu a is nó s usamos

2from PySide2 . QtGui import QCursor , QPixmap , Qt , QPainter

3from PySide2 . QtWidgets import QMainWindow , QPushButton , QLabel , QWidget ,

QApplication , QStyleOption , QStyle , QMessageBox

Capítulo 2. Desenvolvimento dos jogos 106

4from PySide2 . QtCore import QRect , Signal , Slot , QCoreApplication ,

QMetaObject , QEventLoop , QTimer

Código 25 – Alteração dos importes generalizados para apenas os necessários

1#Importando o sistem a , tempo e fun ç õ e s para a l e a t o r i e d a d e do python abaixo ,

e a l i n h a de cima d e f i n e o t i p o de c ó digo a s e r usado no python , o

hashtag (#) é u t i l i z a d o para d e f i n i r coment á r i o s .

2import sys , time , random

4#Importando as imagens do qrc , que foram c o n v e r t i d a s para o a rqui vo

r e c u r s o s . py .

5import r e c u r s o s

7#Importando os o b j e t o s do PySide2 u t i l i z a d o s no programa , ∗simboliza tudo

em python , n e ss e caso vamos e s p e c i f i c a r qu a is nó s usamos

8from PySide2 . QtGui import QCursor , QPixmap , Qt , QPainter

9from PySide2 . QtWidgets import QMainWindow , QPushButton , QLabel , QWidget ,

QApplication , QStyleOption , QStyle , QMessageBox

10 from PySide2 . QtCore import QRect , Signal , Slot , QCoreApplication ,

QMetaObject , QEventLoop , QTimer

12 class Ui_MainWindow( object) :

13 de f s etupUi ( s e l f , MainWindow ) :

14 i f not MainWindow . objectName ( ) :

15 MainWindow . setObjectName ( u"MainWindow")

16 MainWindow . r e s i z e ( 5 61 , 546)

17 MainWindow . setAutoFillBackground ( F als e )

18 s e l f . c e n t r a l w i d g e t = novo_widget ( MainWindow )

19 s e l f . c e n t r a l w i d g e t . setObjectName ( u" centralwidget " )

20 s e l f . l abe l_ 2 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

21 s e l f . l a b e l _ 2 . setObjectName (u" label_2 " )

22 s e l f . l a b e l _ 2 . setGeometry (QRect (10 , 90 , 121 , 211) )

23 s e l f . l a b e l _2 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

24 s e l f . l a b e l _ 2 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

25 s e l f . l a b el_2 . s e t S c a l e d C o n t e n t s ( True )

26 s e l f . l abe l_ 3 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

27 s e l f . l a b e l _ 3 . setObjectName (u" label_3 " )

28 s e l f . l a b e l _ 3 . setGeometry (QRect (150 , 90 , 121 , 211) )

29 s e l f . l a b e l _3 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

30 s e l f . l a b e l _ 3 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

31 s e l f . l a b el_3 . s e t S c a l e d C o n t e n t s ( True )

32 s e l f . l abe l_ 5 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

33 s e l f . l a b e l _ 5 . setObjectName (u" label_5 " )

34 s e l f . l a b e l _ 5 . setGeometry (QRect (430 , 90 , 121 , 211) )

35 s e l f . l a b e l _5 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

36 s e l f . l a b e l _ 5 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

37 s e l f . l a b el_5 . s e t S c a l e d C o n t e n t s ( True )

Capítulo 2. Desenvolvimento dos jogos 107

38 s e l f . l abe l_ 6 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

39 s e l f . l a b e l _ 6 . setObjectName (u" label_6 " )

40 s e l f . l a b e l _ 6 . setGeometry (QRect (10 , 320 , 121 , 211) )

41 s e l f . l a b e l _6 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

42 s e l f . l a b e l _ 6 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

43 s e l f . l a b el_6 . s e t S c a l e d C o n t e n t s ( True )

44 s e l f . l abe l_ 7 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

45 s e l f . l a b e l _ 7 . setObjectName (u" label_7 " )

46 s e l f . l a b e l _ 7 . setGeometry (QRect (150 , 320 , 121 , 211) )

47 s e l f . l a b e l _7 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

48 s e l f . l a b e l _ 7 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

49 s e l f . l a b el_7 . s e t S c a l e d C o n t e n t s ( True )

50 s e l f . l abe l_ 8 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

51 s e l f . l a b e l _ 8 . setObjectName (u" label_8 " )

52 s e l f . l a b e l _ 8 . setGeometry (QRect (290 , 320 , 121 , 211) )

53 s e l f . l a b e l _8 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

54 s e l f . l a b e l _ 8 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

55 s e l f . l a b el_8 . s e t S c a l e d C o n t e n t s ( True )

56 s e l f . l abe l_ 9 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

57 s e l f . l a b e l _ 9 . setObjectName (u" label_9 " )

58 s e l f . l a b e l _ 9 . setGeometry (QRect (430 , 320 , 121 , 211) )

59 s e l f . l a b e l _9 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

60 s e l f . l a b e l _ 9 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

61 s e l f . l a b el_9 . s e t S c a l e d C o n t e n t s ( True )

62 s e l f . l abe l_ 4 = c l i c k l a b e l ( s e l f . c e n t r a l w i d g e t )

63 s e l f . l a b e l _ 4 . setObjectName (u" label_4 " )

64 s e l f . l a b e l _ 4 . setGeometry (QRect (290 , 90 , 121 , 211) )

65 s e l f . l a b e l _4 . se t Curs o r ( QCursor (Qt . PointingHandCursor ) )

66 s e l f . l a b e l _ 4 . setPixmap (QPixmap( u":/ imagens /fundo_carta " ) )

67 s e l f . l a b el_4 . s e t S c a l e d C o n t e n t s ( True )

68 s e l f . l a b e l = QLabel ( s e l f . c e n t r a l w i d g e t )

69 s e l f . l a b e l . setObjectName ( u"label" )

70 s e l f . l a b e l . setGeometry ( QRect ( 10 , 10 , 541 , 6 1) )

71 s e l f . l a b e l . setTextFormat (Qt . AutoText )

72 s e l f . l a b e l . setWordWrap ( F a lse )

73 s e l f . l a b e l . s e t T e x t I n t e r a c t i o n F l a g s ( Qt . N oT ex tI nt er ac tio n )

74 s e l f . w id ge t = e scon dido ( s e l f . c e n t r a l w i d g e t )

75 s e l f . widget . setObjectName ( u" widget " )

76 s e l f . widget . s e t E nabled ( True )

77 s e l f . widget . setGeometry ( QRect (1 0 , 90 , 541 , 441) )

78 s e l f . widge t . s e t S t y l e S h e e t ( u" background -color : rgb(170 , 170 , 170) ;" )

79 s e l f . pushButton = QPushButton ( s e l f . widg et )

80 s e l f . pushButton . setObjectName ( u"pushButton")

81 s e l f . pushButton . setGeometry ( QRect ( 2 20 , 4 10 , 111 , 23) )

82 s e l f . pushButton . s e tCu r sor ( QCursor ( Qt . PointingHandCursor ) )

83 s e l f . pushButton . s e t S t y l e S h e e t ( u"background -color: rgb (240 , 240,

240);" )

Capítulo 2. Desenvolvimento dos jogos 108

84 s e l f . l a b el_10 = QLabel ( s e l f . widget )

85 s e l f . label_10 . setObjectName ( u" label_10" )

86 s e l f . label_10 . setGeometry ( QRect (0 , 0 , 541 , 401) )

87 s e l f . label_10 . setPixmap (QPixmap( u ":/ informativo / ferrugem " ) )

88 s e l f . l a b el _ 1 0 . s e t S c a l e d C o n t e n t s ( True )

89 MainWindow . s et Ce nt ralWidget ( s e l f . c e n t r a l w i d g e t )

91 #p art e impor tan te mencionada , como pode s e r observada ,

p ri meir a me nte f a z a c one x ão e n t r e mudar_face e d e p o i s muda r_i nfo rma tiv o

92 s e l f . r e t r a n s l a t e U i (MainWindow )

93 s e l f . la b e l _ 2 . c l i c k . connect ( s e l f . la b e l _ 2 . mudar_face )

94 s e l f . la b e l _ 3 . c l i c k . connect ( s e l f . la b e l _ 3 . mudar_face )

95 s e l f . la b e l _ 4 . c l i c k . connect ( s e l f . la b e l _ 4 . mudar_face )

96 s e l f . la b e l _ 5 . c l i c k . connect ( s e l f . la b e l _ 5 . mudar_face )

97 s e l f . la b e l _ 6 . c l i c k . connect ( s e l f . la b e l _ 6 . mudar_face )

98 s e l f . la b e l _ 7 . c l i c k . connect ( s e l f . la b e l _ 7 . mudar_face )

99 s e l f . la b e l _ 8 . c l i c k . connect ( s e l f . la b e l _ 8 . mudar_face )

100 s e l f . la b e l _ 9 . c l i c k . connect ( s e l f . la b e l _ 9 . mudar_face )

101 s e l f . la b e l _ 2 . c l i c k . connect ( s e l f . widget . mudar_informativo )

102 s e l f . la b e l _ 3 . c l i c k . connect ( s e l f . widget . mudar_informativo )

103 s e l f . la b e l _ 4 . c l i c k . connect ( s e l f . widget . mudar_informativo )

104 s e l f . la b e l _ 5 . c l i c k . connect ( s e l f . widget . mudar_informativo )

105 s e l f . la b e l _ 6 . c l i c k . connect ( s e l f . widget . mudar_informativo )

106 s e l f . la b e l _ 7 . c l i c k . connect ( s e l f . widget . mudar_informativo )

107 s e l f . la b e l _ 8 . c l i c k . connect ( s e l f . widget . mudar_informativo )

108 s e l f . la b e l _ 9 . c l i c k . connect ( s e l f . widget . mudar_informativo )

109 s e l f . pushButton . c l i c k e d . connect ( s e l f . widget . hide )

110

111

112

113 QMetaObject . connectSlotsByName ( MainWindow)

114 # setupUi

115

116 de f r e t r a n s l a t e U i ( s e l f , MainWindow ) :

117 MainWindow . setWindowTitle ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,

u"MainWindow" , None ) )

118 s e l f . l a b e l _ 2 . s e t T e x t ( "" )

119 s e l f . l a b e l _ 3 . s e t T e x t ( "" )

120 s e l f . l a b e l _ 5 . s e t T e x t ( "" )

121 s e l f . l a b e l _ 6 . s e t T e x t ( "" )

122 s e l f . l a b e l _ 7 . s e t T e x t ( "" )

123 s e l f . l a b e l _ 8 . s e t T e x t ( "" )

124 s e l f . l a b e l _ 9 . s e t T e x t ( "" )

125 s e l f . l a b e l _ 4 . s e t T e x t ( "" )

126 s e l f . l a b e l . s et Te x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<html

><head /><body ><span style =\" font - size :12 pt; font -

weight :600;\" > Jogo da memoria : <span style

Capítulo 2. Desenvolvimento dos jogos 109

=\" font -size :10 pt; font - weight :600;\" > Combine as cartas de estrutura

molecular com os materiais correspondentes </body ></html >" ,

None ) )

127 s e l f . pushButton . s et Te xt ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"

Continuar" , None ) )

128 s e l f . l a b e l _ 1 0 . s e t T e x t ( "" )

129 # r e t r a n s l a t e U i

130

131 #Criando a nova c l a s s e novo_widget baseada no QWidget para armazenar as

v a r i á v e i s de compara ção , para s e r usado nas fun ç õ e s do c l i c k l a b e l .

132 class novo_widget ( QWidget ) :

133 #Criando a fun ç ão de i n i c i a l i z a ção , que se executa cada vez que o

programa c r i a uma nova widget u t i l i z a n d o o novo_widget , n ess e caso

apena s o c e n t r a l w i d g e t , e s eta n do quem é s eu p are nte , n e s s e c as o é o

MainWindow , por ém como não vamos u t i l i z á lo , estamos como nenhum , None

134 de f __init__ ( s e l f , parent=None ) :

135 #G ar antindo su a exe cu ç ã o

136 super ( ) . __init__ ( p aren t )

137 #Setand o uma v a r i á v e l na pr ó p r i a widget , por i s s o chamamos o s e l f e

usamos o ponto para d e f i n i r que f az part e dele , que vamos usar e s s a v ar i

á v e l para armazenar o l o c a l da p r im e ir a c arta , para poder t r a b a l h a r com

e l a cas o , o c onj u n to s e j a v e rd ad ei ro , tr av ando , e c a s o nã o s e j a ,

d e s v i r a r a c a rta , d e f i n i m o s s eu v a l o r i n i c i a l como um t e x t o v a z i o

138 self . primeira_carta = ""

139 #Setando uma v a ri á v e l na pró p r ia widget , como no a n t e r i o r usando o s e l f

e ponto , e s s a v a r i á v e l v ai armaze nar o t i p o da c ar t a , que v a i s e r o

nome usad o p ara f a z e r as compara ç õ e s , d e f i n i m o s s eu v a l o r i n i c i a l como

um texto vazio

140 self . tipo_primeira_carta = ""

141 #Setando uma v a ri á v e l na pró p r ia widget , como no a n t e r i o r usando o s e l f

e ponto , e s s a v a r i á v e l va i armazenar s e o c on junto das c a r t a s

s e l e c i o n a d a s e s t ão c o r r e t a s ou não , d ef in imo s seu va l or i n i c i a l como

falso

142 s e l f . conjunto = Fa l se

143 #Setando uma v a ri á v e l na pró p r ia widget , como no a n t e r i o r usando o s e l f

e ponto , e s s a v a r i á v e l va i armazenar o nome do c onjunto das c a r t a s

c o r r e t a s , d e f i n i m o s s eu v a l o r i n i c i a l como um t e x t o v a z i o

144 s e l f . conjunto_nome = ""

145 #Setando uma v a ri á v e l na pró p r ia widget , como no a n t e r i o r usando o s e l f

e ponto , e s s a v a r i á v e l v ai armazenar a q uan ti dad e de c o nj unt os c o r r e t o s

, n e s c e s s a r i o para sab e r s e venceram o j ogo da memó r i a , d e fi n im o s seu

v a l o r i n i c i a l em z e ro

146 s e l f . contador_conjunto = 0

147 #Criand o uma v a r i á v el , com uma l i s t a , que p o s s u i duas l i s t a s den tro ,

para d e c l a r a r uma l i s t a u t i l i z a m o s c o l c h e t es , uma l i s t a v a zi a é d e f i n i d o

por [ ] , n es s e caso c riamos uma l i s t a , com duas l i s t a s dentro , [ [ ] , [ ] ] ,

para r e p r e s e n t a r que a p r im eir a l i s t a é de m at eri a e a segunda é

Capítulo 2. Desenvolvimento dos jogos 110

molecula , po d e ri a u t i l i z a r um d i c i o n á r i o para f a z e r i s s o , por ém s e r i a

mais complexo , por e s s e motivo f o i e s c o l h i d o us ar l i s t a s , d en tro das

l i s t a s , se e s c r e v e os nomes p e r te nc e nt e aos a p e l i d o s c r i a d o s no u nico .

qrc , sendo e l e s " agua " , " ferrugem " , " fumaca " , " s a l "

148 s e l f . l i s t a = [ [ "agua " ,"ferrugem " ," fumaca " ,"sal" ] , [ "agua " ,"ferrugem" ,"

fumaca" ,"sal" ] ]

149

150 #Criando a c l i c k l a b e l que s e baseado na QLabel , que f o i c r i a d o no QT Design

151 class c l i c k l a b e l ( QLabel ) :

152 #Criando a fun ç ão de i n i c i a l i z a ção , que se executa cada vez que o

programa c r i a uma nova l a b e l u t i l i z a n d o o c l i c k l a b e l , e setando quem é

seu pa ren te , n e s s e c aso QWidget

153 de f __init__ ( s e l f , parent=QWidget ) :

154 #Gar an tindo que v a i f u nc io nar , e v a i a c i o n a r todas as v e z e s com o s u per

( )

155 super ( ) . __init__ ( p aren t )

156

157 #Aqui e st am os vendo a q u an tid a de de nomes d entro da p r i m e i r a l i s t a ,

se ndo q uan tida de de m at er ia , usando l e n ( ) , que con ta q ua n tidades de

i t e n s dentro de o b j et o s no python , ent ã o v e r i f i c a m o s a p o s i ç ão 0 da

l i s t a , l i s t a [ 0 ] , consi d e rando que l i s t a e s t á em seu parente , por i s s o

s e l f . p a rent ( ) . l i s t a [ 0 ] , em linguagem de programa ção é normal come ç ar as

c ontag en s em 0 , p or i s s o a p r i m e i r a p o s i ç ão de uma l i s t a é 0 em vez de 1

158 quantidade_materia = l e n ( s e l f . p a rent ( ) . l i s t a [ 0 ] )

159 #Aqui estamos vendo a quanti dade de nomes dentro da segunda l i s t a ,

sendo quantidade de m o lecula

160 quantidade_molecula = l e n ( s e l f . p a r e nt ( ) . l i s t a [ 1 ] )

161

162 #Aqui v e r i f i c a m o s s e a qua nt id ad e de mater ia e mole cula s ão m ai or es que

0 , resumindo s e as l i s t a s não e s t ão v a zia s , p ode r ia s e r usado uma

s i m p l e s compara ç ã o com [ ] , po r ém para f i c a r mai s f á c i l o e ntendimento ,

u t i l i z a m o s a quant idade , para i s s o comparamos a v a r i á v e l de materia , e

usamos um s i n a l i z a d o r ’ and ’ que s i g n i f i c a ’ e ’ , e comparamos a v a r i á v e l

de molecula , o ’ and ’ s i g n i f i c a que s ó e x e c u t a s e ambas as compara ç õ es

deram p o s s i t i v o , caso s e j a n e c e s s a r i o uma ou o utro s e usa ’ o r ’ , mas

n e ss e caso apenas queremos s e ambas forem p o s s i t i v a s .

163 i f ( quantidade_materia > 0) and (quantidade_molecula > 0) :

164 #Sendo ambas maiores de z e ro vamos c r i a r um s e l e t o r a l e a t o r i o en tr e

molecula e materia

165 #Aqui e st amos usando uma da s fun ç õ e s do random , a fun ç ã o r andi n t , que

gera um número a l e a t ó r i o e n tr e o i n i c i a l e o f i n a l passados para fun ç ão

, n e ss e caso 0 e 1 , ale a to r iam e nte , sendo e l e para d e f i n i r qual das

l i s t a s v a i s e r usada a p r i m e i r a ou a se gunda

166 t i p o _ a l e a t o r i o = random . r an din t ( 0 , 1 )

167 #Aqui faz em os uma v e r i f i c a ç ã o s e o número g era do a l e a t o r i a m e n t e f o i 0

168 i f tipo_aleatorio == 0:

169 #Se o número f o i 0 , s i g n i f i c a que v a i usar a p r i m e i r a l i s t a , que

Capítulo 2. Desenvolvimento dos jogos 111

estamos usando para r e p r e s e n t a r materia , por i s s o vamos d e f i n i r o t i p o

como materia

170 s e l f . t i p o = "materia "

171 #Aqui v e r i f i c a m o s s e todas as o u tra s v e r i f i c a ç õ e s deram n eg ativ as ,

n e s s e c as o s e f o i 1

172 e l s e :

173 #Sendo 1 d e f i n i m o s o t i p o como m o le c ul a

174 s e l f . t i p o = "molecula"

175 #Aqui vamos p eg ar um d os nomes d entro da l i s t a a l e a t o r i a m e n t e usando

uma fun ç ão do random chamada c hoice , e a l i s t a que va i pegar va i s e r

a l e a t o r i a , usando o t i po que f o i c r ia d o ant erio rmen te

176 s e l f . nome = random . c h oi c e ( s e l f . p aren t ( ) . l i s t a [ t i p o _ a l e a t o r i o ] )

177 #Agora que pegamos o nome a leat o riam e nte , vamos remover e l e da l i s t a ,

para não t e r r e p e t i ç ão , na proxima vez que b u scar um nome , para i s s o

usamos a fun ç ão temove da l i s t a , passando o nome que f o i e s c o l h i d o

anteriormente

178 s e l f . p aren t ( ) . l i s t a [ t i p o _ a l e a t o r i o ] . remove ( s e l f . nome )

179

180 #Aqui v e r i f i c a m o s s e quan tida de_materia é maior que 0 , e s e a

quantidade_molecula é 0

181 elif ( quantidade_materia > 0) and (quantidade_molecula == 0) :

182 #Caso molecu l a e s t e j a v azia , e materia tenha nomes ainda , vamos

t r a b a l h a r apenas com a p r i me ir a l i s t a , que é a de m at eria . por i s s o

vamos u s ar o c h o i c e com a l i s t a [ 0 ]

183 s e l f . nome = random . c h o i c e ( s e l f . p a rent ( ) . l i s t a [ 0 ] )

184 #Vamos re mo ve r o nome da p r i m e i r a l i s t a

185 s e l f . parent ( ) . l i s t a [ 0 ] . remove ( s e l f . nome )

186 #Vamos s e t a r que o t i po vai s er m at er ia

187 s e l f . t i p o = "materia "

188

189 elif ( quantidade_materia == 0) and (quantidade_molecula > 0) :

190 #Caso materia e s t e j a va z ia , e molecula tenha nomes ainda , vamos

t r a b a l h a r apenas com a segunda l i s t a , que é a de m ole cula . p or i s s o

vamos u s ar o c h o i c e com a l i s t a [ 1 ]

191 s e l f . nome = random . c h o i c e ( s e l f . p a rent ( ) . l i s t a [ 1 ] )

192 #Vamos remover o nome da segunda l i s t a

193 s e l f . parent ( ) . l i s t a [ 1 ] . remove ( s e l f . nome )

194 #Vamos s e t a r que o t i po vai s er m olecula

195 s e l f . t i p o = "molecula"

196

197 #Criand o o s i n a l que f o i c r i a d o no e d i t o r de s i n a i s no QT Desi gn er , é

i mp orta n te t e r o mesmo nome , n e s s e c a so c l i c k .

198 c l i c k = S i g n a l ( )

199

200 #Mudando a f un ç ã o padr ã o do c l i c k do mouse , par a f a z e r a l g o e x t r a .

201 de f mousePressEvent ( s e l f , e v ent ) :

202 #Adicionando que apó s c l i c a r com o mouse e l e emita o s i n a l c l i c k .

Capítulo 2. Desenvolvimento dos jogos 112

203 s e l f . c l i c k . emit ( )

204

205 @Slot ( )

206 de f mudar_face ( s e l f ) :

207 #Aqui criamos o caminho para imagem , u t i l i z a n d o as v a r i á v e i s d e f i n i d a s

acima , para i s s o usamos de t e x t o + v a r i á v e l , n e s s e c as o usamos + pa ra

c o nc ate nar d o i s t e x t o s s epa r ad o s , ou c o n cat ena r t e x t o com v a r i á v e l ,

n e ss e cas o ":/ " + t i p o va i r e s u l t a r em " : / m ateria " e ao u t i l i z a r +"/"+nome

v ai co nc a tenar o r e s u l t a d o a n t e r i o r com " / agua " , r e s u l ta n do em " : /

materia / agua " , que é o caminho para a imagem de agua

208 caminho = ":/"+ s e l f . t i p o+"/"+s e l f . nome

209

210 #Vamos u sar o QPixmap , usando o caminho c r i a d o a n te r iormente , usando o

’ u ’ a n te s do t e x t o p ar a d e f i n i r , que v a i s e r um t e x t o uni co de , pa ra

a c e i t a r acentua ç õ e s e o ut ros c a r a c t e r e s e s p e c i a i s sem problemas , usando

assim o u " " e concatenando o caminho com o u""+ caminho

211 pixmap = QPixmap( u""+caminho )

212 #Aqui chamamos a p r ó p r i a l a b e l com o s e l f e d e f i n i m o s uma nova imagem

usando o pixmap c r i a d o a n te r iormente , ao c on tr á r i o de ant es , nã o

prec i s a mos f a z e r v e r i f i c a ç ão , e vamos apenas mudar a f a c e

213 s e l f . setPixmap ( pixmap )

214

215 #Criamos o c u r s o r como normal

216 c u r s o r = QCursor ( Qt . ArrowCursor )

217 #Aqui chamamos a p r ó p r i a l a b e l com o s e l f e d e f i n i m o s o novo c u r s o r

criado

218 s e l f . s e tC ur so r ( c u r s o r )

219

220 #Aqui chamamos a pr ó p r ia l a b e l e bloqueamos s eus s i n a i s , para que não

s e p os sa mais c l i c a r enquanto e s t á com a f a c e para cima .

221 s e l f . b l o c k S i g n a l s ( True )

222

223 #Vamos v e r i f i c a r se j á e x i s t e uma p r im e ir a ca r t a no par e n t e da l a be l ,

por i s s o chamamos a l a b e l com s e l f usamos o ponto para i d e n t i f i c a r sua

l i g a ç ão , e chamamos s eu parent e e v e r i f i c a m o s se sua v a r i á v e l

tipo_primeira_carta está vazia

224 i f ( s e l f . p a rent ( ) . t i p o _primeira_ c a r t a == "" ) :

225 #Caso a v a r i á v e l e s t e j a v az i a , qu er d i z e r que nã o t e v e uma p r i m e i r a

c a rt a ainda , ent ão vamos a d i c i o n a r o s v a l o r e s de ssa l a b e l como p r im ei ra

carta

226 #Aqui e stamos passando o caminho da l a b e l para o p arente na v a r i á v e l

primeira_carta

227 s e l f . parent ( ) . p r i meira _ c arta = s e l f

228 #Aqui estamos mudando a v a r i a v e l tipo_prim ei ra_carta para agua

229 s e l f . parent ( ) . ti p o _ p rimeira_ca r t a = s e l f . nome

230 #Aqui s e v e r i f i c a s e o p r im e ir o i f d er f a l s o , ne ss e c a s o não e s t i v e r

v az i o , s e o t i p o da p r i m e i r a c a r t a é agua

Capítulo 2. Desenvolvimento dos jogos 113

231 elif ( s e l f . parent ( ) . ti p o _ p rimeira_ca r t a == s e l f . nome ) :

232 #Caso o t i p o s e j a agua , qu er d i z e r que a p r i m e i r a c a r t a e r a do t i p o

agua também, portanto fazendo um conjunto

233 #Aqui e stamos mudando o v a l o r da v a r i á v e l c onjunto do p a rente pa ra

v e rda de iro , achou uma combina ç ã o

234 s e l f . parent ( ) . conjunto = True

235 #Aqui e stamos mudando o v a l o r da v a r i á v e l conjunto_nome do p aren te

para agua

236 s e l f . parent ( ) . conjunto_nome = s e l f . nome

237 #Aqui e stamos aumentando o v a l o r da v a r i á v e l c on ta do r_ co nj unto do

p arent e em 1 , p o i s achou uma combina ç ã o

238 s e l f . parent ( ) . contador_conjunto += 1

239 #Aqui e st am os mudando o v a l o r da p r i m e i r a c a r t a novamente para v a zi a ,

p o i s achou um par , tem que a ch ar outro par

240 s e l f . parent ( ) . p r i meira _ c arta = ""

241 #Aqui e st am os mudando o v a l o r do t i p o da p r i m e i r a c a r t a novamente

pa ra vazia , p o i s achou um par , tem que a cha r outro par

242 s e l f . parent ( ) . tip o _ p r imeira_car t a = ""

243 #Aqui s e não pa ssa r em nenhumas das v e r i f i c a ç õ es , resumindo caso , não

e s t e j a vazio , nem s e j a uma combina ç ão , resumindo duas c a r t a s de t i p o s

diferentes

244 e l s e :

245 #Agora que as c a rt a s foram e s c o l h i d a s erradas , temos que v o l ta r a

f a c e para fundo , a pa rte de t r ás , que i n i c i a l m e n t e tinha , por ém temos

que d e i x a r por um tempo p ara poderem v er q ua l c a r t a e r á , e enqua nto se

espera , temos que i m p edir que c o n tinue virando ou t ra s c arta s , para i s s o

vamos b l oq u ear t odos os s i n a i s , a t é d e s v i r a r as c a r t a s .

246 #Aqui u t i l i z a m o s f o r que s i g n i f i c a para cada , n e ss e c aso para cada

l a b e l no par e n t e de s s e o b j e t o , s e l f . p a rent ( ) , ache seu s f i l h o s que sejam

l a b e l s , . f i n d C h i l d r e n ( QLabel ) , como é mais de um f i l h o temos que

u t i l i z a r o f or , par a t r a b a l h a r com cada l a b e l

247 f o r l a b e l i n s e l f . p arent ( ) . f i n d C h i l d r e n ( QLabel ) :

248 #Aqui v e r i f i c a m o s s e a l a b e l do p are nte e s t á com o c u r so r de

po n t eiro , que s i g n i f i c a que é a p art e de t r ás , e pode s e r c l i c a d o .

249 i f l a b e l . c u r s o r ( ) == QCursor ( Qt . Pointin gHandCur sor ) :

250 #Caso s e j a o c u r s o r de p o nte iro , b l o q u e i e s e u s s i n a i s .

251 l a b e l . b l o c k S i g n a l s ( True )

252

253 #Criamos um c i c l o ( loop ) para p a ss ar o tempo , d e f i n i n d o u t i l i z a n d o

QEventLoop ( )

254 lo op = QEventLoop ( )

255 #Tendo c r i ad o o l oop u t i l i z a m o s o QTimer para f a z e r um c i c l o ú nico ,

s i n g l e S h o t de 500 m ili segund os , e d e po is e n c e r r a r o l oop .

256 QTimer . s i n g l e S h o t ( 500 , loop . q u i t )

257 #Aqui e xec uta mos o loo p , pa ra p a s s a r 500 m i l i s e g u n d o s a n t e s de

co ntin uar a usar o a p l i c a t i v o

258 loo p . exec_ ( )

Capítulo 2. Desenvolvimento dos jogos 114

259

260 #Agora ap ó s o l o op de 500 m i l i se gu ndo s , vamos v i r a r a p r i m e i r a c a r t a

e a segunda c a r ta de v o l t a para t r á s , vamos c a r r e g a r a imagem de fundo

no pixmap

261 pixmap = QPixmap( u":/ imagens /fundo_carta " )

262 #Aqui d e f i n i m o s a p r ó p r i a l a b e l de v o l t a para o fu ndo

263 s e l f . setPixmap ( pixmap )

264 #Aqui d e f i n i m o s a l a b e l que e s t á armazenada no seu p a re n t e d e ntro do

p r i m e i r a c ar t a , de v o l t a para o f undo

265 s e l f . parent ( ) . p r i meira _ c arta . setPixmap ( pixmap )

266

267 #Aqui c ri amos um c u r s o r de p o n t e i r o

268 c u r s o r = QCursor ( Qt . Po inting HandCurs or )

269 #Aqui d e f i n i m os a pr ó p r i a l a b e l de v o l t a pa ra p o n t e i r o

270 s e l f . s e tC ur so r ( c u r s o r )

271 #Aqui d e f i n i m o s a l a b e l que e s t á armazenada no seu p a re n t e d e ntro do

p r i m e i r a c ar t a , de v o l t a para p o n t e i r o

272 s e l f . p arent ( ) . p r im ei r a _ca rta . s e tC ur so r ( c u r s o r )

273

274 #Aqui vamos f a z e r o mesmo f o r de a n tes s ó que n es s e caso para

de sblo quea r a a p l i c a ç ão

275 f o r l a b e l i n s e l f . p arent ( ) . f i n d C h i l d r e n ( QLabel ) :

276 i f l a b e l . c u r s o r ( ) == QCursor ( Qt . Pointin gHandCur sor ) :

277 #Caso s e j a o c u r s o r de p o nte iro , d e s b l o q u e i e s e u s s i n a i s .

278 l a b e l . b l o c k S i g n a l s ( F als e )

279

280 #Apó s t e r mudado todos de v o l ta ao normal , vamos v o l t a r as v ar i á v e i s

do p a r en t e da l a b e l p ar a v a z i o

281 s e l f . parent ( ) . p r i meira _ c arta = ""

282 #Def in im os a v a r i á v e l do p arente des sa l a b e l chamado

tipo_primeira_carta de volta para vazio

283 s e l f . parent ( ) . tip o _ p r imeira_car t a = ""

284

285 #Aqui estamos c ria n do a widget escond ido , baseado em QWidget

286 class e sco ndid o ( QWidget ) :

287 #Criando a fun ç ão de i n i c i a l i z a ção , que se executa cada vez que o

programa c r i a uma nova widg et esc ondi do , e d e f i n i n d o quem é seu pa re nt e ,

n e s s e c as o é o u tro QWidget

288 de f __init__ ( s e l f , parent=QWidget ) :

289 #Gar an tindo que v a i f u nc io nar , e v a i a c i o n a r todas as v e z e s com o s u per

( )

290 super ( ) . __init__ ( p aren t )

291 #Aqui e stamos d e f i n i n d o que a w id ge t e sco ndido é para e s t a r es con dida ,

para i s s o usamos a fun ç ão setHidden passando o par âmetro True , para que

quando f o r c r i a d o a t e l a e s t e j a e sco ndi da

292 s e l f . setHidden ( True )

293

Capítulo 2. Desenvolvimento dos jogos 115

294 #Essa fun ç ão mo d if i ca o e f e i t o de pintu r a , p o i s widgets promovidas não

ace ita m pl ano de fundo , por i s s o p r e c i s a −s e mudar s ua fun ç ã o n ati v a , não

p re ci sa ndo mexer , tendo em vá r i o s l u g a r e s seu c ó d ig o pron to .

295 de f p aintE vent ( s e l f , pe ) :

296 o = QStyleOption ()

297 o . init From ( s e l f )

298 p = QPainter ( s e l f )

299 s e l f . s t y l e ( ) . drawPrimitive ( QStyle . PE_Widget , o , p , s e l f )

300

301 #Essa fun ç ã o v a i m o d i f i c a r o e f e i t o de escon der , que o c o r r e ao c l i c a r

no bot ã o c o n ti n uar , n e s s e c a so vamos ape nas mudar e l e para c as o t enha

completado todas as combina ç õ e s mostre um popup com parab é ns voc ê venceu

, e ao c on fir mar o popup f e c h e o j o go

302 de f hideEvent ( s e l f , even t ) :

303 #Aqui v e r i f i c a m o s s e a v a r i a v e l co ntado r_con junto do s eu pare nt e

novo_widget c he go u a 4 , r e pr es en ta nd o achou t odas as combina ç õ e s poss í

veis

304 i f ( s e l f . p a rent ( ) . contado r_conjunto == 4) :

305 #Caso t en ha achado , mo str a na t e l a do t e r m i n a l Parab é ns voc ê v enc eu

306 p r i n t (u" Parabéns você venceu" )

307 #Aqui criamos um popup de mensagem

308 msgBox = QMessageBox ( )

309 #Aqui d e f i n i m o s o t í t u l o do popup de mensagem

310 msgBox . setWi ndowTitle ( u"Parab éns" )

311 #Aqui d e f i n i m o s q ua l a mensagem do popup de mensagem

312 msgBox . s etText ( u"Parabéns você venceu " )

313 #Aqui d e f i n i m o s q ua l o bo t ão do popup de mensagem

314 msgBox . s et Stan dardB utton s ( QMessageBox . C lose )

315 #Aqui d e f i n i m o s q ua l o bo t ão do popup de mensagem é o pad r ão , p ara

c as o a p e r t e ESC, Ent er , Spa ce no t e c l a d o , a c i o n e o bot ã o

316 msgBox . se tDef ault Butt on ( QMessageBox . Close )

317 #Aqui v e r i f i c a m o s s e a mensagem f o i executada , no c aso acionad o algum

bot ão

318 r e t = msgBox . exec_ ( )

319 #Aqui v e r i f i c a m o s s e o bot ão a cion ado f o i Close

320 i f r e t == QMessageBox . Close :

321 #Caso t enha s i d o en ce rr am os o programa

322 sy s . e x i t ( )

323

324 #Aqui criamos o r e c e p t o r mudar_informativo para mudar q ual a imagem

basea do em q ual f o i a combina ç ã o

325 @Slot ( )

326 de f mudar_informativo ( s e l f ) :

327 #Aqui v e r i f i c a m o s s e a v a r i á v e l c onj unto do seu p arente novo_widget , é

True , no c a s o v e r dade i r o , é um conjunto

328 i f ( s e l f . p a rent ( ) . conjunto ) :

329 #Se f o r um co nju nt o , d e f i n i m o s o caminho p ara imagem , n e s s e c a so

Capítulo 2. Desenvolvimento dos jogos 116

sabemos que se u p r e f i x o v ai s e r in forma tivo , e s eu nome e s t á armazenado

no s eu pare nt e na v a r i á v e l conjunto_nome , por i s s o que é i mp or ta nte t e r

nomes i g u a i s

330 pixmap = QPixmap( u" :/ informativo /"+s e l f . parent ( ) . conjunto_nome )

331 #Aqui d e f i n i m o s a imagem p ara o s eu f i l h o l a b e l , n e s s e c a s o pas samo s

apenas Chi ld em vez de C hildren p o i s é a penas um f i l h o que queremos ,

usamos f i n d C h i l d ( QLabel ) , como nã o temos o utra l a b e l dent r o da wid ge t

escon d ido , não pre c i s a mos d e f i n i r seu nome , mas c a s o houvesse mais de

uma l a b e l , t e r í amos que p a s sa r d o i s par â metros , a l ém de seu t i p o QLabel ,

p a ss a r í amos seu nome , n e s s e ca so la be l_ 10 , f i c a n d o s e l f . f i n d C h i l d (

QLabel , " l abel_10 " )

332 s e l f . f i n d C h i l d ( QLabel ) . setPixmap ( pixmap )

333 #Aqui apó s t e r mudado o sua imagem de info r mati v o , vamos d e f i n i r que

não s e j a mais escondid a , resumindo apare ç a na t e l a

334 s e l f . setHidden ( F al s e )

335 #Aqui mudamos novamente o conjunto para Falso , p o is j á v e r i f i c o u ,

e ss e , pa ra e s p e r a r p e lo pr ó ximo c onjunto

336 s e l f . parent ( ) . conjunto = Fal s e

337 #Aqui mudamos novamente o nome do c on junto pa ra v azio , p o i s j á

v e r i f i c o u e s se , para e s p e r a r p e l o pr ó ximo c onjunto

338 s e l f . parent ( ) . conjunto_nome = ""

339

340 #Tendo c r i ad o tudo , vamos c r i a r a j a n e l a p r i n c i p a l , u t i l i z a n d o a i n t e r f a c e

c r i a d a no QT D esigne r

341 class MainWindow(QMainWindow , Ui_MainWindow) :

342 #Funç ão de i n i c i a l i z a ç ão

343 de f __init__ ( s e l f ) :

344 #G ar antindo su a exe cu ç ã o

345 super(MainWindow , s e l f ) . __init__ ( )

346 #Adicionando a i n t e r f a c e

347 s e l f . setup Ui ( s e l f )

348 #Mostrando a i n t e r f a c e

349 s e l f . show ( )

350

351 #Começ o da a p l i c a ç ão , d e f i n i n d o seu i n í c i o p r i n c i p a l

352 i f __name__ == ’__main__ ’ :

353 #Defi n e a c r i a ç ão do a p l i c a t i v o

354 app = QApplicat ion ( sys . argv )

355 #Adicionando a j a n e l a p r i n c i p a l para o a p l i c a t i v o

356 mainWin = MainWindow ( )

357 #Executando o a p l i c a t i v o

358 r e t = app . exec_ ( )

359 #Terminando o programa

360 sy s . e x i t ( )

Código 26 – Código completo do jogo da memoria

Capítulo 2. Desenvolvimento dos jogos 117

Figura 67 – Interface do jogo da memoria funcionando após três combinações corretas

Capítulo 2. Desenvolvimento dos jogos 118

Figura 68 – Interface do jogo da memoria após combinar as cartas de CO2

Capítulo 2. Desenvolvimento dos jogos 119

Figura 69 – Interface do jogo da memoria após vencer o jogo

1pyinstaller −−hidden−import PySide2 . QtXml −−noconfirm −−onefile −−name="

Meu_aplicativo" aplicativo .py

Código 27 –

Comando utilizado para converter o arquivo aplicativo.py em um executável

individual

2.3 Desenvolvimento do jogo de álgebra linear

Na secção anterior aprendemos a usar o QT Designer para criar um jogo de memoria,

desde da criação da interface até a criação do executável, com esse conhecimento vamos

criar um jogo de álgebra linear de três variáveis nessa secção, para mais informações sobre

álgebra linear de três variáveis pode ser observado em (DAWKINS, ), com imagens no

lugar das variáveis x,y e z, com um input de texto para escrever qual o valor das imagens,

que ao acertar vai carregar um vídeo, para isso vamos criar uma nova pasta para começar,

nesse caso escolhemos o nome xyz e criamos dentro de documentos, no windows, agora

vamos fazer tudo novamente, pulando as etapas separadas e criando o .ui no QT Design

Capítulo 2. Desenvolvimento dos jogos 120

de uma única vez, para isso vamos começar pegando às imagens que vão ser usadas, para

abelha, ﬂor, mel e um botão de play, juntamente com o vídeo sobre produção de mel,

porém videos não podem ser adicionados ao qrc, apenas às imagens, para adicionar o vídeo,

é necessário mudar algumas coisas no aplicativo e no pyinstaller, que serás veriﬁcado mais

para frente, por enquanto vamos achar as imagens e o vídeo, e adicionar às imagens ao

.qrc no QT Designer

2.3.1 Vídeo e imagens a serem utilizadas no jogo de álgebra linear

Nessa subsecção vamos deﬁnir quais serão as imagens a serem utilizadas no desen-

volvimento do jogo de álgebra linear, juntamente com a seleção do vídeo a ser usado, para

a variável X vamos usar uma imagem de abelha, ﬁgura 70, a variável Y vamos substituir

por uma ﬂor, ﬁgura 71, por ﬁm a variável Z vamos trocar por uma imagem de um pote

de mel, ﬁgura 72, tendo selecionado as imagens a serem utilizadas no lugar das variáveis,

vamos pegar uma imagem de play para colocar sobre a tela do vídeo, preferencialmente

uma imagem transparente e branca como a qual fora selecionado, ﬁgura 73, com todas as

imagens selecionadas, vamos pegar um vídeo de como é feito o mel, como base de qual fora

escolhido podemos ver uma imagem de sua abertura com o nome do vídeo e seu criador,

ﬁgura 74.

Figura 70 –

Imagem de abelha escolhida para substituir a variável X da equação de algebra

linear, produzida por (VECTEEZY,a)

Capítulo 2. Desenvolvimento dos jogos 121

Figura 71 –

Imagem de abelha escolhida para substituir a variável Y da equação de algebra

linear, produzida por (VECTEEZY,b)

Figura 72 –

Imagem de abelha escolhida para substituir a variável Z da equação de algebra

linear, produzida por (STOCKIO, )

Figura 73 –

Imagem de play escolhida para adicionar a tela do vídeo, produzida por (JOHN,

2019)

Capítulo 2. Desenvolvimento dos jogos 122

Figura 74 –

Imagem de abertura do vídeo, produzida por (Geoﬀrey Kater; Agro Bayer

Brasil,2018)

2.3.2 Criando o repositório recursos.qrc

Na subsecção anterior fora selecionado quais os materiais a serem utilizados no

aplicativo, tendo o vídeo a ser conseguido com o criador do vídeo (Geoﬀrey Kater; Agro

Bayer Brasil,2018) e depois de ter conseguido o vídeo é recomendado usar um conversor

para mudar o formato para .avi, o conversor usado nesse projeto foi (123 APPS, ), nessa

subsecção vamos criar o repositório das imagens a serem utilizadas, conforme fora feito ao

desenvolver o jogo da memoria na subsecção 2.2.4, tendo as imagens em .png e o vídeo em

.avi criamos uma pasta dentro de xyz, chamada imagens para armazenar as imagens e

outra pasta chamada video para armazenar o vídeo, agora vamos no QT Designer criar o

arquivo .qrc, que vamos chamar de recursos.qrc, e adicionar um preﬁxo chamado imagens,

ao adicionar os arquivos de imagens podemos selecionar todos de uma vez, depois só mudar

o apelido de cada um deles, nesse caso vamos apelidamos respectivamente de abelha, ﬂor,

mel e play, o vídeo não serás adicionado ao .qrc, pois não é suportado, ao completar de

criar o repositorio, deve ﬁcar conforme a ﬁgura 75.

Capítulo 2. Desenvolvimento dos jogos 123

Figura 75 – Editor de recursos preenchido corretamente

2.3.3

Criação da label de informativo do jogo, e deﬁnindo a equação mate-

mática a ser utilizada

Na subsecção anterior criamos as pastas onde as imagens e o vídeo serão armazena-

dos, juntamente com a criação do repositorio recursos.qrc, nessa subsecção vamos começar

o desenvolvimento criando uma label, como fora feito anteriormente na subsecção 2.2.2 e

também a utilização do rich text na subsecção 2.2.5, para a label grande com a explicação

do jogo, com a utilização de rich text, para adicionar o texto ’Desaﬁo: / Descubra o valor

da abelha, da ﬂor e do mel / para descobrir como é feito o mel’, a barra fora utilizado

para deﬁnir onde terás quebras de linha, possuindo os tamanhos 28 para o titulo e 14 para

o texto, conforme pode ser observado na ﬁgura 76. Após criado a label inicial, vamos criar

às próximos labels de texto e imagem, para isso precisamos saber qual vai ser a fórmula de

álgebra usada, nesse projeto usamos os valores x = 3, y = 9 e z = 27, sendo às fórmulas

encontradas na tabela 1, podendo veriﬁcar sua resolução de cada linha nas tabelas 2,3

e4, no jogo a ser desenvolvido vamos mudar o X por abelha, Y por ﬂor e Z por mel.

Capítulo 2. Desenvolvimento dos jogos 124

Tabela 1 – Formula de álgebra linear a ser usada, com sua quantidade de casas

posicionamento das casas 1 2 3 4 5 6 7 8 9 10

Primeira linha 2 x + y - z = - 1 2

Segunda linha 2 y - 7 x = - x

Terceira linha 3 z - y * y = x - x

Tabela 2 – Resolução da primeira linha da formula

2x + y - z = -12

2*3 + 9 - 27 = -12

6 + 9 - 27 = -12

15 - 27 = -12

-12 = -12

Tabela 3 – Resolução da segunda linha da formula

2y - 7x = -x

2*9 - 7*3 = -3

18 - 21 = -3

-3 = -3

Tabela 4 – Resolução da terceira linha da formula

3z - y * y = x - x

3*27 - 9*9 = 3 - 3

81 - 81 = 0

0 = 0

Capítulo 2. Desenvolvimento dos jogos 125

Figura 76 – Deﬁnindo o texto formatado de explicação do jogo

2.3.4

Criando as labels de imagem e texto para as formulas de álgebra linear

Na subsecção anterior criamos uma label com a explicação do jogo, e deﬁnimos

qual vai ser a formula de algebra a ser utilizada, juntamente com a vizualização de sua

resolução, nessa subsecção agora vamos criar todas as imagens e textos com o mesmo

tamanho, para isso vamos criar uma label com imagem, como fora feito no desenvolvimento

do jogo da memoria na subsecção 2.2.5 e depois de criar a label de imagem copiar para

às outras posições, depois vamos alterar o seu conteúdo de imagem para o valor real,

sendo ele outra imagem ou texto, apenas estaremos usando a imagem para ﬁcar mais fácil

veriﬁcar sua localização do que com uma label vazia, para isso vamos copiar a imagem

de abelha transparente, fazendo uma cópia na pasta, e editando ela para ﬁcar com fundo

branco, ﬁcando ainda mais visível, no caso do Windows, apenas abrir no paint e salvar é o

suﬁciente, pois o paint não trabalha com transparência, portanto faz o fundo ﬁcar branco,

e apertar no rebobinar do editor de recursos, conforme a ﬁgura 77, que ao rebobinar o

fundo vai ﬁcar branco conforme a ﬁgura 78, tendo feito essa etapa começamos a deﬁnir seu

tamanho e ajustar suas posições usando o pontilhado do plano de fundo, colocando quatro

linhas, a primeira com 10, a segunda com 8, a terceira com 10, e a última com 3 grupos

de 3, que vão ser para a veriﬁcação do valor, fazendo como foi feito no desenvolvimento

do jogo da memoria na subsecção 2.2.5, adicionando uma imagem e copiando ela, depois

com duas copiando as duas, e assim por diante, como pode ser observado na ﬁgura 79,

Capítulo 2. Desenvolvimento dos jogos 126

selecionando oito imagens para copiar para a segunda linha, depois de fazer a copia para

todas as linhas a interface deve estar parecida com a ﬁgura 80.

Figura 77 –

Criando label com a imagem de abelha com fundo transparente, e selecionando

o reset para recarregar as imagens

Figura 78 –

Label com a imagem de abelha com fundo branco após recarregar as imagens

Capítulo 2. Desenvolvimento dos jogos 127

Figura 79 – Copiando labels em conjunto para fazer sua copia

Figura 80 – Interface com todas as labels em seus devidos lugares

Capítulo 2. Desenvolvimento dos jogos 128

2.3.5 Mudando as imagens de abelha para seus respectivos valores

Na subsecção anterior criamos todas a labels a serem utilizadas, criando as quatro

linhas com suas posições alinhadas, nessa subsecção vamos começar as labels com a imagem

de abelha pela fórmula de álgebra, começando pela primeira posição da primeira linha,

removendo o pixmap, usando o botão voltar no editor de propriedade, na aba QLabel, ao

lado do pixmap e também desabilitando o escalated contents, conforme pode ser observado

na ﬁgura 81, após isso vamos adicionar o número 2, usando rich text, ﬁgura 82, para

poder editar seu tamanho e colocar em negrito, depois fazer isso com todos os outros,

usando o mesmo estilo, negrito e do mesmo tamanho para ﬁcar uniforme, sendo o tamanho

utilizado 48 em negrito e centralizado, conforme ﬁgura 83, tendo feito isso a interface deve

estar parecida com a ﬁgura 84. Para agilizar o processo vamos usar Ctrl + click do mouse

para selecionar várias ao mesmo tempo, podendo remover às abelhas, ou mudar a imagem

de todas ao mesmo tempo, baseado na fórmula, como a quarta casa da primeira linha é

ﬂor(y), a segunda casa da segunda linha é ﬂor, a quarta e sexta casa da terceira linha é

ﬂor, e a primeira casa do conjunto do meio das três abelhas, presente na quarta linha,

selecionando todas ao mesmo tempo, e continuando fazendo isso para cada uma que tiver

repetição, até terminar de arrumar as três fórmulas, e os três comparadores da quarta

linha, caso seja para colocar texto, apertar o voltar no pixmap e scaleted contents, antes

de editar o texto, como fora feito para o número 2.

Figura 81 – Selecionando para remover a imagem e seu conteúdo escalado

Capítulo 2. Desenvolvimento dos jogos 129

Figura 82 – Selecionando para formatar o texto da label

Figura 83 –

Formatação do número 2 para a label, seguindo o padrão centralizado, negrito

e fonte 48

Capítulo 2. Desenvolvimento dos jogos 130

Figura 84 –

Visualização da interface após mudar o primeiro valor de abelha para o número

2.3.5.1 Mudando de abelha para ﬂor

Nessa sub-subsecção estaremos selecionando todas as posições onde se encontra a

variável Y da formula, e substituindo a imagem de abelha pela imagem de ﬂor, conforme

a ﬁgura 85, tendo trocado a imagem a interface vai ﬁcar conforme a ﬁgura 86.

Figura 85 – Selecionando as posições do Y para mudar de abelha para a imagem de ﬂor

Capítulo 2. Desenvolvimento dos jogos 131

Figura 86 – Visualização após mudar as imagens para ﬂor

2.3.5.2 Mudando de abelha para o número 2

Na sub-subsecção anterior fora arrumado as posições das ﬂores, nessa sub-subsecção

vamos arrumar as outras posições onde se encontra o número 2, selecionando todas as

posições e repetindo o processo que fora feito para o primeiro número 2, ﬁcando conforme

a ﬁgura 87.

Capítulo 2. Desenvolvimento dos jogos 132

Figura 87 –

Visualização após mudar as imagens faltantes para o número 2, conforme feito

anteriormente na ﬁgura 84

2.3.5.3 Mudando de abelha para o sinal de igualdade

Na sub-subsecção anterior fora arrumado as posições do número 2 que faltavam,

nessa sub-subsecção vamos arrumar as posições onde se encontram o sinal de igualdade,

para isso seleciona-se todas as posições onde deve possuir o sinal de igualdade, tirando

a imagem e o scalated contents, como na ﬁgura 81 da subsecção 2.3.5 e após removido

a imagem selecionamos change rich text, conforme a ﬁgura 88, para poder colocar o

sinal de igualdade com formatação, negrito, centralizado de tamanho 48, como pode ser

observado na ﬁgura 89, ao conﬁrmar todas as imagens selecionadas vão mudar para o sinal

de igualdade, conforme a ﬁgura 90.

Capítulo 2. Desenvolvimento dos jogos 133

Figura 88 –

Selecionando as posições de igualdade, após remover a imagem e seu conteúdo

escalado, juntamente com a seleção de sua formatação de texto

Figura 89 –

Formatação do sinal de igualdade, seguindo o padrão centralizado, negrito e

fonte 48

Capítulo 2. Desenvolvimento dos jogos 134

Figura 90 – Visualização após mudar as imagens de abelha para o sinal de igualdade

2.3.5.4 Mudando de abelha para o sinal de negativo

Na sub-subsecção anterior fora arrumado os sinais de igualdade, nessa sub-subsecção,

vamos realizar os mesmos passos da anterior, apenas selecionando a posição do sinal de

negativo, e escrevendo o sinal de negativo com formatação especial ao invez do sinal de

igualdade, conforme pode ser observado na ﬁgura 91.

Capítulo 2. Desenvolvimento dos jogos 135

Figura 91 – Visualização após mudar as imagens de abelha para o sinal de menos

2.3.5.5 Mudando de abelha para a imagem de mel

Na sub-subsecção anterior fora arrumado os sinais de negativo, nessa sub-subsecção,

vamos selecionar as posições onde se encontra a variável Z da formula e substituir a imagem

de abelha pela imagem do pote de mel, como fora feito na sub-subsecção 2.3.5.1, onde fora

trocado pela ﬂor, ao trocar as abelhas por potes de mel a interface deve ﬁcar conforme a

ﬁgura 92.

Capítulo 2. Desenvolvimento dos jogos 136

Figura 92 – Visualização após mudar as imagens de abelha para a imagem de mel

2.3.5.6 Mudando de abelha para o sinal de positivo

Na sub-subsecção anterior fora arrumado as posições da variável Z, que será

representada pelo pote de mel, nessa sub-subsecção vamos arrumar a posição do sinal

de positivo, considerando que essa e as outras posições que ainda faltam arrumar não

possuem mais de uma posição, tendo apenas uma posição para selecionar, para arrumar o

sinal de positivo, vamos selecionar ele e fazer a mesma coisa feitas nos anteriores e também

no começo na subsecção 2.3.5, só que ao invez do número 2 vamos escrever o sinal de

positivo, arrumando para ﬁcar conforme a ﬁgura 93.

Capítulo 2. Desenvolvimento dos jogos 137

Figura 93 – Visualização após mudar as imagens de abelha para o sinal de positivo

2.3.5.7 Mudando de abelha para o número 1

Na sub-subsecção anterior fora arrumado a posição do sinal de positivo, nessa

sub-subsecção vamos arrumar a posição do número 1, tendo apenas uma posição para

selecionar, para isso vamos selecionar ele e fazer sua formatação como na sub-subsecção

anterior ou na subsecção 2.3.5, escrevendo o número 1 ao invez do número 2, deixando

conforme a ﬁgura 94.

Capítulo 2. Desenvolvimento dos jogos 138

Figura 94 – Visualização após mudar as imagens de abelha para o número 1

2.3.5.8 Mudando de abelha para o número 7

Na sub-subsecção anterior fora arrumado a posição do número 1, nessa sub-subsecção

vamos arrumar a posição do número 7, tendo apenas uma posição para selecionar e fazendo

os mesmos passos da sub-subsecção anterior, deixando conforme a ﬁgura 95.

Capítulo 2. Desenvolvimento dos jogos 139

Figura 95 – Visualização após mudar as imagens de abelha para o número 7

2.3.5.9 Mudando de abelha para o número 3

Na sub-subsecção anterior fora arrumado a posição do número 7, nessa sub-subsecção

vamos arrumar a posição do número 3, tendo apenas uma posição para selecionar e fazendo

os mesmos passos da sub-subsecção anterior, deixando conforme a ﬁgura 96.

Capítulo 2. Desenvolvimento dos jogos 140

Figura 96 – Visualização após mudar as imagens de abelha para o número 3

2.3.5.10 Mudando de abelha para o sinal de multiplicação

Na sub-subsecção anterior fora arrumado a posição do número 3, nessa sub-subsecção

vamos arrumar a posição do sinal de multiplicação, tendo apenas uma posição para

selecionar e fazendo os mesmos passos da sub-subsecção anterior, só que invez de escrever

um número vamos escrever o sinal de asterisco, para representação de multiplicação,

deixando conforme a ﬁgura 97.

Capítulo 2. Desenvolvimento dos jogos 141

Figura 97 –

Visualização após mudar as imagens de abelha para o sinal de multiplicação

2.3.6 Criação dos QLine Edit

Na subsecção anterior fora arrumado as labels com a imagem de abelha para

o texto ou imagem correta da formula encontrada na tabela 1, tendo então arrumado

todas os campos onde se tem label, nessa subsecção vamos alterar os campos de label

por campos de texto na última linha, onde se tem a comparação, para isso vamos usar o

QLineEdit, encontrado na caixa de widgets, dentro da aba Input Widgets, chamado Line

Edit, como pode ser observado na ﬁgura 98, após colocar ele na aplicação, vamos mudar

seu tamanho para ﬁcar do mesmo tamanho da abelha, cobrindo a imagem de abelha em

sua plenitude, como pode ser observado na ﬁgura 99, ao ter feito o primeiro, vamos copiar

para os proximos locais de comparação, mas antes de fazer a cópia, vamos fazer algumas

mudanças, começando pelo seu stylesheet, ﬁgura 100, onde vamos mudar o tipo de fonte,

ﬁgura 101, mudando para arial, estilo black e com tamanho 40, ﬁgura 102, ﬁcando como

estilo font: 87 40pt "Arial";, ﬁgura 103, para alterar o stylesheet além de usar o editor

de propriedades se pode apenas aperta com o botão direito no objeto que vai querer

mudar, após ter feito, vamos criar e promovê-la para uma nova classe chamada valores,

não é necessário criar sinais ou receptores, como forá feito no desenvolvimento do jogo da

memoria na subsecção 2.2.6, após ter mudado seu estilo e te-la promovido para valores,

vamos copiar para os outros lugares, ﬁgura 104, após estar com todos eles criados, vamos

selecionar os três campos de editor de texto, ﬁgura 105, e apertar Ctrl + K para colocar

eles para trás, podendo ver a label com a imagem de abelha, ﬁgura 106 o qual precisamos

Capítulo 2. Desenvolvimento dos jogos 142

deletar, lembrando que após estar visível às labels de abelhas é necessário selecionar

novamente, pois a caixa de seleção está no QLineEdit, recomendado fazer uma por vez

para garantir que está deletando o correto, na ﬁgura 107 pode se ver a ultima imagem de

abelha selecionada para ser deletada e na ﬁgura 108 podemos veriﬁcar a interface após ter

deletado todas as imagens, deixando a interface com as formulas corretas.

Figura 98 – Criando o Line Edit

Capítulo 2. Desenvolvimento dos jogos 143

Figura 99 – Ajustando o tamanho do Line Edit para o tamanho da imagem de abelha

Figura 100 – Selecionando o Line Edit para mudar seu estilo

Capítulo 2. Desenvolvimento dos jogos 144

Figura 101 – Selecionando para adicionar uma nova fonte

Figura 102 – Deﬁnindo a nova fonte com arial, black, tamanho 40

Capítulo 2. Desenvolvimento dos jogos 145

Figura 103 – Visualização do editor de estilos após adicionar a nova fonte

Figura 104 – Copiando a Line Edit para as outras posições de abelha

Capítulo 2. Desenvolvimento dos jogos 146

Figura 105 – Selecionando todas os Line Edit

Figura 106 – Visualização da interface após mudar todos os Line Edit para o fundo

Capítulo 2. Desenvolvimento dos jogos 147

Figura 107 – Selecionando manualmente cada imagem de abelha e as deletando

Figura 108 – Visualização da interface após arrumar os Line Edit

Capítulo 2. Desenvolvimento dos jogos 148

2.3.7 Arrumando os componente da interface, label, botão, e Line Edit

Na subsecção anterior fora arrumado os locais das Qline edit, sendo eles os locais

de texto, para poder escrever os valores das variaveis, onde se faras as comparações para

saber se está correto, nessa subsecção vamos arrumar os componentes da interface, sendo

eles a imagem da abelha com fundo branco, nomeando as caixas de texto, promovendo

a widget da interface e criando um botão de veriﬁcação, para veriﬁcar se os valores

escritos nas caixas de texto estão corretos, começando por deletar a imagem de abelha

com plano de fundo branco da pasta imagens, e colocar a cópia feita anteriormente com

fundo transparente em seu lugar, lembrando de manter o nome que tinha anteriormente, e

recarregar a aplicação, usando o editor de recursos, como anteriormente na subsecção 2.3.4,

tendo apertado para recarregar a interface ﬁcaras conforme a ﬁgura 109, agora tendo

terminado a parte das equações vamos começar a criar a parte funcional, como o botão de

veriﬁcar, que vai mandar um sinal para widget, fazer a veriﬁcação, para isso temos que

promover a widget, como no jogo da memória na sub-subsecção 2.2.8.7, nesse caso vamos

promover o centralwidget para uma classe chamada widget_principal, como na ﬁgura 110 e

criar um receptor, chamado veriﬁcar(), tendo feito isso vamos criar o botão QPushButton,

como feito na sub-subsecção 2.2.10.3, no centro após a quarta linha, do mesmo tamanho

que a comparação central, como pode ser observado na ﬁgura 111, e vamos mudar seu

nome para Veriﬁcar juntamente com seu stylesheet, para adicionar um estilo de fonte, para

arial black, tamanho 40 como nos na subsecção anterior ao criar os QLineEdit, ﬁcando font:

87 40pt "Arial";, podendo observar o botão após fazer a mudança no texto na ﬁgura 112,

tendo arrumado o botão, vamos mudar os nomes das QLineEdit, para nomes mais fácil

de se trabalhar, para isso vamos usar o botão direito change objectname, ﬁgura 113, e

colocar seus nomes, respectivamente, valor_abelha, valor_ﬂor e valor_mel.

Capítulo 2. Desenvolvimento dos jogos 149

Figura 109 –

Visualização da interface após recarregar as imagens, fazendo as imagens de

abelha ﬁcarem com fundo transparente

Figura 110 – Promovendo centralwidget para widget_principal

Capítulo 2. Desenvolvimento dos jogos 150

Figura 111 – Criando botão

Figura 112 –

Mudando texto e estilo de fonte do botão para Veriﬁcar com fonte arial,

black, tamanho 40

Capítulo 2. Desenvolvimento dos jogos 151

Figura 113 – Selecionando o Line Edit para mudar seu nome

2.3.8

Criando link manualmente entre o botão veriﬁcar e a widget_principal

Na subsecção anterior fora arrumado as labels de abelha, nomeados os inputs de

texto, e criado um botão veriﬁcar, nessa subsecção vamos criar o link entre o botão veriﬁcar

e a widget_principal, para isso vai ser necessário cria-lo manualmente por não ser possivel

selecionar a widget_principal no modo de editor de sinais, para isso vamos até o editor

de sinais e receptores no canto direito inferior, ﬁgura 114, para linkar a função clicked do

botão, com a função criada veriﬁcar() do widget_principal, para isso é necessario apertar

no botão de positivo para criar um novo link, ﬁgura 115, ao ser clicado no botão vai

permitir fazer a seleção de quem envia o sinal, qual é o sinal, quem vai receber e qual vai

ser o receptor, ﬁgura 116, para poder visualizar o nome dos componentes é possível mudar

sua barra de tamanho, estendendo ela, fazendo isso para todos os locais de selecionar,

para poder ver o nome completo e selecionar o botão pushButton como quem vai enviar o

sinal, ﬁgura 117, para o tipo de sinal vamos selecionar o sinal clicked() nativo do botão,

ﬁgura 118, para quem vai receber o sinal vamos selecionar central_widget, ﬁgura 119,

por ﬁm vamos selecionar o receptor veriﬁcar() qual fora criado na subsecção anterior,

ﬁgura 120, ao completar de arrumar o link criado deve ﬁcar conforme a ﬁgura 121.

Capítulo 2. Desenvolvimento dos jogos 152

Figura 114 – Selecionando a aba de sinais e receptores do canto inferior direito

Figura 115 –

Selecionando a criação de novo sinal na aba de sinais e receptores do canto

inferior direito

Capítulo 2. Desenvolvimento dos jogos 153

Figura 116 –

Visualização da barra de tamanho do texto na aba de sinal e receptores, com

tamanho pequeno

Capítulo 2. Desenvolvimento dos jogos 154

Figura 117 –

Selecionando o botão veriﬁcar, como quem envia após estender o tamanho

do texto, tornando-o visível

Capítulo 2. Desenvolvimento dos jogos 155

Figura 118 – Selecionando o sinal clicked() do botão veriﬁcar

Capítulo 2. Desenvolvimento dos jogos 156

Figura 119 – Selecionando a widget_principal, como quem vai receber o sinal

Capítulo 2. Desenvolvimento dos jogos 157

Figura 120 – Selecionando o receptor veriﬁcar() da widget_principal

Capítulo 2. Desenvolvimento dos jogos 158

Figura 121 –

Visualização da aba de sinais e receptores, após fazer a criação do link entre

o botão veriﬁcar e a widget_principal

2.3.9 Criando a widget escondido

Na subsecção anterior criamos o link entre o botão veriﬁcar e a widget_principal

manualmente, nessa subsecção vamos criar a widget escondida a qual só vai aparecer quando

todos os valores estiverem corretos, como fora feito na criação do jogo da memoria, quando

as cartas estava certa na subsecção 2.2.10.1, vamos pegar uma widget na caixa de widgets,

na aba de Containers, cobrindo toda a tela deixando apenas uma linha de pontilhado de

margem, com seu background-color: rgb(170,170,170);, utilizando o stylesheet como feito

anteriormente, ﬁgura 122, tendo criado vamos promover para a classe escondido, ﬁgura 123,

tendo promovido vamos criar alguns slots para a classe escondido, chamados play_video()

para parar se estiver tocando e tocar se estiver parado o vídeo, mediastate_changed() com

o objetivo de veriﬁcar quando tiver uma mudança no estado do vídeo e setposition() para

deﬁnir em qual posição(tempo do vídeo) o vídeo está,ﬁgura 124, depois de feito vamos

mudar seu nome para widget_escondida, pois será necessário mais tarde, como fora feito

para os campos de texto na subsecção 2.3.7.

Capítulo 2. Desenvolvimento dos jogos 159

Figura 122 – Criação da widget, e deﬁnindo sua cor para cinza com o rgb(170,170,170)

Figura 123 – Selecionando a widget para promove-la para escondido

Capítulo 2. Desenvolvimento dos jogos 160

Figura 124 – Adicionando os sinais da widget escondido

2.3.10 Criação dos componentes da widget_escondida

Na subsecção anterior fora criado um widget com o nome de widget_escondida e

promovido para a classe escondido com 3 receptores, nessa subsecção vamos criar alguns

utensílios para o reprodutor de vídeo, sendo uma barra deslizante para ﬁcar em cima do

botão e abaixo do vídeo, uma label com uma imagem de play no meio da tela, com plano

de fundo preto rgb(0,0,0), e um botão fechar.

2.3.10.1 Criação do botão da widget_escondida

Nessa sub-subsecção vamos criar o botão da widget_escondida o qual podemos

copiar o outro botão criado chamado veriﬁcar, para manter o mesmo tamanho uniforme,

selecionando a widget escondida e apertando para ir para baixo e para cima após copiado

utilizando o atalhos ctrl+k e ctrl+l como feito na criação dos inputs de texto na subsec-

ção 2.3.6, tendo copiado vamos mudar sua fonte e cor de plano de fundo no stylesheet,

apagando o já existente para não confundir, ﬁgura 125, vamos usar a mesma cor usada

no jogo de memória, rgb(240,240,240), ﬁgura 126, e para a fonte vamos usar a mesma

usada no outro botão e campos de texto, font: 87 40pt "Arial";, ﬁgura 127, mas como

é necessário usar dois estilos, ﬁgura 128, vamos juntar eles, apertando delete depois do

ponto e virgula( ; ) da primeira linha, ﬁgura 129, para fazer que ﬁquem na mesma linha,

evitando complicações durante o desenvolvimento futuro.

Capítulo 2. Desenvolvimento dos jogos 161

Figura 125 –

Copiado a botão veriﬁcar para a widget escondido e selecionado a edição de

estilo do botão, removido seu conteúdo, para recria-lo

Figura 126 – Adicionado plano de fundo para o botão

Capítulo 2. Desenvolvimento dos jogos 162

Figura 127 – Adicionando uma fonte para o botão sendo arial, black, tamanho 40

Figura 128 –

Visualização do estilo do botão com duas linhas, sendo cor de fundo e fonte

Capítulo 2. Desenvolvimento dos jogos 163

Figura 129 –

Visualização do estilo do botão com cor de fundo e fonte, em uma única

linha

2.3.10.2 Criação da barra de rolagem da widget_escondida

Na sub-subsecção anterior fora criado o botão da widget_escondida e arrumado

seu estilo, nessa sub-subsecção vamos criar a barra de rolagem do video, encontrada na

caixa de widgets, na aba de inputs, no mesmo lugar onde se encontra o line edit, o item a

ser utilizado se chama horizontal slider, vamos criar ela e aumentar deixando uma pequena

margem de ambos os lados,ﬁgura 130.

Capítulo 2. Desenvolvimento dos jogos 164

Figura 130 – Criando a barra de rolagem para o vídeo

2.3.10.3 Criação da label play, para o tocador de vídeo da widget_escondida

Na sub-subsecção anterior fora criado a barra de andamento do vídeo, nessa sub-

subsecção vamos criar o uma label com a image de play, começando pela criação de uma

label mediana quadrada no meio da tela e selecionando a imagem play, ﬁgura 131, tendo

criado como na ﬁgura 132, vamos arrumar seu background para preto sendo ele o rgb(0,0,0),

ﬁgura 133.

Capítulo 2. Desenvolvimento dos jogos 165

Figura 131 – Criando label e deﬁnindo sua imagem como play

Figura 132 –

Visualização da interface da widget_escondida, após criação da label com a

imagem do play

Capítulo 2. Desenvolvimento dos jogos 166

Figura 133 –

Visualização da interface da widget escondido, após mudar a cor de fundo

da label com a imagem do play para preto rgb(0,0,0)

2.3.11

Promovendo os componentes da widget_escondida e mudando o nome

da botão

Na subsecção anterior fora criado os componentes da widget_escondida nessa

subsecção, vamos promover a label para clicklabel, com o sinal click(), e o Qslider,

sendo o horizontal slider, vamos promover para media_slider, e criar os receptores, slots,

duration_changed() e position_changed(), e mudar o texto no botão para fechar.

2.3.11.1 Promovendo a label da imagem do play para uma clicklabel

Nessa sub-subsecção vamos promover a label de imagem para uma clicklabel, como

fora feito na subsecção ??,

começando com sua promoção para clicklabel, ﬁgura 134, e a criação do sinal click(),

ﬁgura 135.

Capítulo 2. Desenvolvimento dos jogos 167

Figura 134 – Selecionando a label da imagem do play, para promove-la para clicklabel

Figura 135 – Adicionando o sinal click(), para a classe especial clicklabel

2.3.11.2 Promovendo a barra de rolagem para media_slider

Na sub-subsecção anterior fora promovido a label para clicklabel e criado seu

sinal click(), nessa sub-subsecção vamos promover a barra de rolagem para media_slider,

Capítulo 2. Desenvolvimento dos jogos 168

ﬁgura 136, e criar os receptores duration_changed() e position_changed(), ﬁgura 137.

Figura 136 – Selecionando a barra de rolagem, para promove-la para media_slider

Figura 137 –

Adicionando os receptores duration_changed() e position_changed(), para a

classe especial media_slider

Capítulo 2. Desenvolvimento dos jogos 169

2.3.11.3 Mudando o texto do botão para Fechar

Na sub-subsecção anterior fora promovido a barra de rolagem para media_slider e

criado seus receptores, nessa sub-subsecção vamos mudar o texto do botão para Fechar,

apertando duas vezes no texto, ou usando o botão direito e selecionando para mudar o

texto ﬁcando como a ﬁgura 138.

Figura 138 –

Visualização da interface após mudar o nome do botão de veriﬁcar para

fechar

2.3.12 Criação da widget para tocar vídeo

Na subsecção anterior fora promovido os componentes da widget_escondida, nessa

subsecção vamos criar uma widget para rodar o vídeo, cobrindo toda a tela, antes do

slider, ﬁgura 139, mudar seu plano de fundo para preto rgb(0,0,0) para ﬁcar mais visível

e vamos promover para uma classe video, ﬁgura 140, criamos um sinal click() como na

clicklabel, ﬁgura 141, e depois selecionar a label apertar Ctrl+K, ﬁgura 142, para deixar

ele por baixo da label de imagem, ﬁcando a imagem do play na sua frente, ﬁgura 143.

Capítulo 2. Desenvolvimento dos jogos 170

Figura 139 – Criando widget e deﬁnindo sua cor de fundo para preto rgb(0,0,0)

Figura 140 – Promovendo a nova widget para a classe especial video

Capítulo 2. Desenvolvimento dos jogos 171

Figura 141 – Adicionando o sinal click() para a classe especial video

Figura 142 – Selecionando a widget video, para move-la para o fundo

Capítulo 2. Desenvolvimento dos jogos 172

Figura 143 –

Visualização da interface após mover a widget video para o fundo, tornando

o label de play visível

2.3.13 Criação dos links da widget_escondida

Na subsecção anterior fora criado a label para o vídeo, nessa subsecção vamos criar

os links entre o video e os componentes da widget_escondida, usando o editor de sinais no

canto esquerdo superior, como feito na subsec 2.2.10.2, linkando o click() da clicklabel, com

o receptor play_video() da widget escondido, ﬁgura 144, o click() da widget video, com o

receptor play_video() da widget escondido, ﬁgura 145, o sinal sliderMoved() de QSlider,

com o receptor set_position da widget escondido, ﬁgura 146, e o clicked() do botão fechar

com o receptor close() da MainWindow, ﬁgura 147, que é necessário habilitar os sinais e

receptores herdados, no checkbox, ﬁgura 148, para poder selecionar o MainWindow com a

seta, só é necessário arrastar o mousse para fora da tela. Tendo feito isso, já terminamos

tudo que precisava ser feito no QT Designer, só salvar o arquivo .ui, nesse caso chamamos

ele de interface.ui.

Capítulo 2. Desenvolvimento dos jogos 173

Figura 144 –

Criando link entre o sinal click() da label do play e o receptor play_video()

da widget escondido

Figura 145 – Criando link entre o sinal click() da widget video e o receptor play_video()

da widget escondido

Capítulo 2. Desenvolvimento dos jogos 174

Figura 146 –

Criando link entre o sinal sliderMoved() da barra de rolagem media_slider e

o receptor set_position() da widget escondido

Figura 147 –

Criando link entre o sinal clicked() do botão fechar e o receptor close() da

MainWindow, que precisa ser herdado do QWidget

Capítulo 2. Desenvolvimento dos jogos 175

Figura 148 –

Criando link entre o sinal clicked() do botão fechar e o receptor close()

da MainWindow, após habilitar a visualização dos sinais e receptores da

QWidget

2.3.14 convertendo os arquivos

Na subsecção anterior fora criado os links entre o vídeo e seus componentes, nessa

subsecção vamos converter o arquivo os recursos.qrc e interface.ui para arquivos Python,

usando os comandos no terminal como no jogo da memória na subsecção 2.2.8, usando cd

até chegar na pasta, e executando os comandos de conversão 28 e29.

1pyside2−r c c r e c u r s o s . q rc −o r e c u r s o s . py

Código 28 –

Comando utilizado paraconverter arquivos .qrc para .py, nesse caso converter

recursos.qrc para recursos.py

1pyside2−u ic i n t e r f a c e . ui > i n t e r f a c e . py

Código 29 –

Comando utilizado para converter arquivos .ui para .py, nesse caso converter

interface.ui para interface.py

2.3.15 Criando os importes para o aplicativo.py

Na subsecção anterior fora convertido o recursos.qrc e algebra.ui para arquivos

python, nessa subsecção vamos começar a criar o aplicativo.py com no jogo da memoria

na subsecção 2.2.8.4, fazendo os imports generalizados, fazendo algumas mudanças, como

Capítulo 2. Desenvolvimento dos jogos 176

tirando time e random, os quais não precisaremos e adicionando o os, o qual precisaremos

para deﬁnir o caminho onde o vídeo se encontra, além de adicionar dois novos importes

para reprodução de vídeo, sendo eles QtMultimediaWidgets e QtMultimedia, conforme

pode ser observado no código 30.

1#−∗− coding : u t f −8−∗−

2#Imp ortando o s i s t e m a e o s i s t e m a o p e r a c i o n a l , a l i n h a de cima d e f i n e o

t i p o de c ó d i go a s e r usado no python , o hashtag (#) é u t i l i z a d o para

d e f i n i r coment á r i o s .

3import sys , os

4#Importando as imagens do qrc , que foram c o n v e r t i d a s para o a rqui vo

r e c u r s o s . py .

5import r e c u r s o s

7#Importando os o b j e t o s do PySide2 u t i l i z a d o s no programa , ∗simboliza tudo

em python

8from PySide2 . QtGui import ∗

9from PySide2 . QtWidgets import ∗

10 from PySide2 . QtCore import ∗

12 #Importando os o b j e t o s do PySide2 u t i l i z a d o s para reprodu ç ão de v í deo

13 from PySide2 . QtMultimediaWidgets import QVideoWidget

14 from PySide2 . QtMultimedia import ∗

Código 30 – Criando os importes generalizados para o aplicativo

2.3.16 Criando a função de conversor de caminho

Na subsecção anterior criamos os importes genéricos a serem utilizados na aplicação,

nessa subsecção vamos criar uma função para converter o caminho onde o vídeo se encontra,

por não ser possivel usar o arquivo qrc para vídeos, para isso usamos o caminho MeiPass

para o criador de executável pyinstaller, para que ele possa ler o vídeo, encontrado em

vários materiais de apoio como em (NAUTILIUS,2015;AHMEDWAS,2018), sendo ele

o motivo de precisar importar o ’os’ junto do ’sys’, pois precisamos pegar o caminho do

sistema operacional e do sistema atual, fazendo uma comparação de qual fora possível ter

acesso, e retornando um caminho que funcione para execução normal ou na criação de um

executável, como pode ser observado no código 31.

1#Funç ã o para c o nv e r s ã o de caminho do s i s t e m a o p e r a c i o n a l , p ara su a u t i l i z a ç

ão durante a c r i a ç ão de e xecut á v e i s .

2de f r e so urce _ pa t h ( r e l a t i v e _ p a t h ) :

3" " " Get a bs ol ut e path to res our ce , works f o r dev and f o r P y I n s t a l l e r

" " "

4#t r y comando pa ra t e n t a r e xe cu t ar a lg o

5try :

6# P y I n s t a l l e r c r e a t e s a temp f o l d e r and s t o r e s path i n _MEIPASS

Capítulo 2. Desenvolvimento dos jogos 177

7# P y I n s t a l l e r c r i a um arq ui vo tempor á r i o para armazenar o caminho

dos i t e n s chamado _MEIPASS

8base_path = s ys ._MEIPASS

9#except comando para v e r i f i c a r se fr a c a ss o u ao t e n ta r e x ecu t ar no try ,

se gun do par â metro é o t i p o de e r r o r , n e s s e c a so Ex ce ptio n , s e der uma

e xc e ç ão , f a ç a

10 except Exception :

11 #Aqui s e usa o caminho padr ã o do s is te ma o p e r a c i o n a l

12 base_path = os . path . abspath ( ".")

14 #Aqui e st amos r e to r nando o caminho c o n v e r t i d o com r e tu r n , para c a so s e j a

normal , ou na c r i a ç ão do e xe cut á v e l

15 r e t u r n o s . path . j o i n ( base_path , r e l a t i v e _ p a t h )

Código 31 – Criando função de correção do caminho para arquivos externos

2.3.17 Copiando a interface convertida para o aplicativo.py

Na subsecção anterior fora criado a função de conversão do caminho, para funcionar

para a criação do executável, nessa subsecção vamos copiar a classe Ui_MainWindow(object):

do arquivo interface.py, que foi criado no QT Designer, para o aplicativo.py, sendo possivel

observar a classe Ui_MainWindow(object) no código 32.

1#I n t e r f a c e c r i a d a no QT D es ign er , p r e s e n t e d en t ro do i n t e r f a c e . py

2class Ui_MainWindow( object) :

3de f s etupUi ( s e l f , MainWindow ) :

4i f not MainWindow . objectName ( ) :

5MainWindow . setObjectName ( u"MainWindow")

6MainWindow . r e s i z e ( 9 51 , 684)

7s e l f . c e n t r a l w i d g e t = w i d g e t _ p r i n c i p a l ( MainWindow )

8s e l f . c e n t r a l w i d g e t . setObjectName ( u" centralwidget " )

9s e l f . l abe l_ 2 = QLabel ( s e l f . c e n t r a l w i d g e t )

10 s e l f . l a b e l _ 2 . setObjectName (u" label_2 " )

11 s e l f . l a b e l _ 2 . setGeometry (QRect (120 , 190 , 71 , 81) )

12 s e l f . l a b e l _ 2 . setPixmap (QPixmap( u":/ imagens /abelha " ) )

13 s e l f . l a b el_2 . s e t S c a l e d C o n t e n t s ( True )

14 s e l f . l abel_25 = QLabel ( s e l f . c e n t r a l w i d g e t )

15 s e l f . label_25 . setObjectName ( u" label_25" )

16 s e l f . label_25 . setGeometry ( QRect ( 30 , 40 , 891 , 121) )

17 s e l f . l abe l_ 3 = QLabel ( s e l f . c e n t r a l w i d g e t )

18 s e l f . l a b e l _ 3 . setObjectName (u" label_3 " )

19 s e l f . l a b e l _ 3 . setGeometry (QRect (30 , 190 , 71 , 81) )

20 s e l f . l abe l_ 4 = QLabel ( s e l f . c e n t r a l w i d g e t )

21 s e l f . l a b e l _ 4 . setObjectName (u" label_4 " )

22 s e l f . l a b e l _ 4 . setGeometry (QRect (300 , 190 , 71 , 81) )

23 s e l f . l a b e l _ 4 . setPixmap (QPixmap( u":/ imagens /flor" ) )

24 s e l f . l a b el_4 . s e t S c a l e d C o n t e n t s ( True )

Capítulo 2. Desenvolvimento dos jogos 178

25 s e l f . l abe l_ 5 = QLabel ( s e l f . c e n t r a l w i d g e t )

26 s e l f . l a b e l _ 5 . setObjectName (u" label_5 " )

27 s e l f . l a b e l _ 5 . setGeometry (QRect (210 , 190 , 71 , 81) )

28 s e l f . l abe l_ 6 = QLabel ( s e l f . c e n t r a l w i d g e t )

29 s e l f . l a b e l _ 6 . setObjectName (u" label_6 " )

30 s e l f . l a b e l _ 6 . setGeometry (QRect (480 , 190 , 71 , 81) )

31 s e l f . l a b e l _ 6 . setPixmap (QPixmap( u":/ imagens /mel" ) )

32 s e l f . l a b el_6 . s e t S c a l e d C o n t e n t s ( True )

33 s e l f . l abe l_ 7 = QLabel ( s e l f . c e n t r a l w i d g e t )

34 s e l f . l a b e l _ 7 . setObjectName (u" label_7 " )

35 s e l f . l a b e l _ 7 . setGeometry (QRect (390 , 190 , 71 , 81) )

36 s e l f . l abe l_ 8 = QLabel ( s e l f . c e n t r a l w i d g e t )

37 s e l f . l a b e l _ 8 . setObjectName (u" label_8 " )

38 s e l f . l a b e l _ 8 . setGeometry (QRect (660 , 190 , 71 , 81) )

39 s e l f . l abe l_ 9 = QLabel ( s e l f . c e n t r a l w i d g e t )

40 s e l f . l a b e l _ 9 . setObjectName (u" label_9 " )

41 s e l f . l a b e l _ 9 . setGeometry (QRect (570 , 190 , 71 , 81) )

42 s e l f . l abel_10 = QLabel ( s e l f . c e n t r a l w i d g e t )

43 s e l f . label_10 . setObjectName ( u" label_10" )

44 s e l f . label_10 . setGeometry ( QRect ( 7 50 , 1 90 , 71 , 81) )

45 s e l f . l abel_11 = QLabel ( s e l f . c e n t r a l w i d g e t )

46 s e l f . label_11 . setObjectName ( u" label_11" )

47 s e l f . label_11 . setGeometry ( QRect ( 8 40 , 1 90 , 71 , 81) )

48 s e l f . l abel_12 = QLabel ( s e l f . c e n t r a l w i d g e t )

49 s e l f . label_12 . setObjectName ( u" label_12" )

50 s e l f . label_12 . setGeometry ( QRect ( 6 60 , 2 90 , 71 , 81) )

51 s e l f . l abel_13 = QLabel ( s e l f . c e n t r a l w i d g e t )

52 s e l f . label_13 . setObjectName ( u" label_13" )

53 s e l f . label_13 . setGeometry ( QRect ( 2 10 , 2 90 , 71 , 81) )

54 s e l f . label_13 . setPixmap (QPixmap( u":/ imagens/flor" ) )

55 s e l f . l a b el _ 1 3 . s e t S c a l e d C o n t e n t s ( True )

56 s e l f . l abel_14 = QLabel ( s e l f . c e n t r a l w i d g e t )

57 s e l f . label_14 . setObjectName ( u" label_14" )

58 s e l f . label_14 . setGeometry ( QRect ( 4 80 , 2 90 , 71 , 81) )

59 s e l f . label_14 . setPixmap (QPixmap( u":/ imagens/abelha " ) )

60 s e l f . l a b el _ 1 4 . s e t S c a l e d C o n t e n t s ( True )

61 s e l f . l abel_15 = QLabel ( s e l f . c e n t r a l w i d g e t )

62 s e l f . label_15 . setObjectName ( u" label_15" )

63 s e l f . label_15 . setGeometry ( QRect ( 1 20 , 2 90 , 71 , 81) )

64 s e l f . l abel_16 = QLabel ( s e l f . c e n t r a l w i d g e t )

65 s e l f . label_16 . setObjectName ( u" label_16" )

66 s e l f . label_16 . setGeometry ( QRect ( 5 70 , 2 90 , 71 , 81) )

67 s e l f . l abel_17 = QLabel ( s e l f . c e n t r a l w i d g e t )

68 s e l f . label_17 . setObjectName ( u" label_17" )

69 s e l f . label_17 . setGeometry ( QRect ( 3 00 , 2 90 , 71 , 81) )

70 s e l f . l abel_18 = QLabel ( s e l f . c e n t r a l w i d g e t )

71 s e l f . label_18 . setObjectName ( u" label_18" )

Capítulo 2. Desenvolvimento dos jogos 179

72 s e l f . label_18 . setGeometry ( QRect ( 3 90 , 2 90 , 71 , 81) )

73 s e l f . l abel_19 = QLabel ( s e l f . c e n t r a l w i d g e t )

74 s e l f . label_19 . setObjectName ( u" label_19" )

75 s e l f . label_19 . setGeometry ( QRect ( 7 50 , 2 90 , 71 , 81) )

76 s e l f . label_19 . setPixmap (QPixmap( u":/ imagens/abelha " ) )

77 s e l f . l a b el _ 1 9 . s e t S c a l e d C o n t e n t s ( True )

78 s e l f . l abel_20 = QLabel ( s e l f . c e n t r a l w i d g e t )

79 s e l f . label_20 . setObjectName ( u" label_20" )

80 s e l f . label_20 . setGeometry ( QRect ( 7 50 , 3 90 , 71 , 81) )

81 s e l f . l abel_21 = QLabel ( s e l f . c e n t r a l w i d g e t )

82 s e l f . label_21 . setObjectName ( u" label_21" )

83 s e l f . label_21 . setGeometry ( QRect ( 1 20 , 3 90 , 71 , 81) )

84 s e l f . label_21 . setPixmap (QPixmap( u":/ imagens/mel " ) )

85 s e l f . l a b el _ 2 1 . s e t S c a l e d C o n t e n t s ( True )

86 s e l f . l abel_22 = QLabel ( s e l f . c e n t r a l w i d g e t )

87 s e l f . label_22 . setObjectName ( u" label_22" )

88 s e l f . label_22 . setGeometry ( QRect ( 3 00 , 3 90 , 71 , 81) )

89 s e l f . label_22 . setPixmap (QPixmap( u":/ imagens/flor" ) )

90 s e l f . l a b el _ 2 2 . s e t S c a l e d C o n t e n t s ( True )

91 s e l f . l abel_23 = QLabel ( s e l f . c e n t r a l w i d g e t )

92 s e l f . label_23 . setObjectName ( u" label_23" )

93 s e l f . label_23 . setGeometry ( QRect ( 5 70 , 3 90 , 71 , 81) )

94 s e l f . l abel_24 = QLabel ( s e l f . c e n t r a l w i d g e t )

95 s e l f . label_24 . setObjectName ( u" label_24" )

96 s e l f . label_24 . setGeometry ( QRect ( 2 10 , 3 90 , 71 , 81) )

97 s e l f . l abel_26 = QLabel ( s e l f . c e n t r a l w i d g e t )

98 s e l f . label_26 . setObjectName ( u" label_26" )

99 s e l f . label_26 . setGeometry ( QRect ( 6 60 , 3 90 , 71 , 81) )

100 s e l f . label_26 . setPixmap (QPixmap( u":/ imagens/abelha " ) )

101 s e l f . l a b el _ 2 6 . s e t S c a l e d C o n t e n t s ( True )

102 s e l f . l abel_27 = QLabel ( s e l f . c e n t r a l w i d g e t )

103 s e l f . label_27 . setObjectName ( u" label_27" )

104 s e l f . label_27 . setGeometry ( QRect ( 3 90 , 3 90 , 71 , 81) )

105 s e l f . l abel_28 = QLabel ( s e l f . c e n t r a l w i d g e t )

106 s e l f . label_28 . setObjectName ( u" label_28" )

107 s e l f . label_28 . setGeometry ( QRect ( 4 80 , 3 90 , 71 , 81) )

108 s e l f . label_28 . setPixmap (QPixmap( u":/ imagens/flor" ) )

109 s e l f . l a b el _ 2 8 . s e t S c a l e d C o n t e n t s ( True )

110 s e l f . l abel_29 = QLabel ( s e l f . c e n t r a l w i d g e t )

111 s e l f . label_29 . setObjectName ( u" label_29" )

112 s e l f . label_29 . setGeometry ( QRect ( 8 40 , 3 90 , 71 , 81) )

113 s e l f . label_29 . setPixmap (QPixmap( u":/ imagens/abelha " ) )

114 s e l f . l a b el _ 2 9 . s e t S c a l e d C o n t e n t s ( True )

115 s e l f . l abel_30 = QLabel ( s e l f . c e n t r a l w i d g e t )

116 s e l f . label_30 . setObjectName ( u" label_30" )

117 s e l f . label_30 . setGeometry ( QRect ( 30 , 390 , 71 , 81) )

118 s e l f . l abel_31 = QLabel ( s e l f . c e n t r a l w i d g e t )

Capítulo 2. Desenvolvimento dos jogos 180

119 s e l f . label_31 . setObjectName ( u" label_31" )

120 s e l f . label_31 . setGeometry ( QRect ( 30 , 490 , 71 , 81) )

121 s e l f . label_31 . setPixmap (QPixmap( u":/ imagens/abelha " ) )

122 s e l f . l a b el _ 3 1 . s e t S c a l e d C o n t e n t s ( True )

123 s e l f . l abel_32 = QLabel ( s e l f . c e n t r a l w i d g e t )

124 s e l f . label_32 . setObjectName ( u" label_32" )

125 s e l f . label_32 . setGeometry ( QRect ( 1 20 , 4 90 , 71 , 81) )

126 s e l f . l abel_34 = QLabel ( s e l f . c e n t r a l w i d g e t )

127 s e l f . label_34 . setObjectName ( u" label_34" )

128 s e l f . label_34 . setGeometry ( QRect ( 6 60 , 4 90 , 71 , 81) )

129 s e l f . label_34 . setPixmap (QPixmap( u":/ imagens/mel " ) )

130 s e l f . l a b el _ 3 4 . s e t S c a l e d C o n t e n t s ( True )

131 s e l f . l abel_35 = QLabel ( s e l f . c e n t r a l w i d g e t )

132 s e l f . label_35 . setObjectName ( u" label_35" )

133 s e l f . label_35 . setGeometry ( QRect ( 7 50 , 4 90 , 71 , 81) )

134 s e l f . l abel_37 = QLabel ( s e l f . c e n t r a l w i d g e t )

135 s e l f . label_37 . setObjectName ( u" label_37" )

136 s e l f . label_37 . setGeometry ( QRect ( 3 40 , 4 90 , 71 , 81) )

137 s e l f . label_37 . setPixmap (QPixmap( u":/ imagens/flor" ) )

138 s e l f . l a b el _ 3 7 . s e t S c a l e d C o n t e n t s ( True )

139 s e l f . l abel_38 = QLabel ( s e l f . c e n t r a l w i d g e t )

140 s e l f . label_38 . setObjectName ( u" label_38" )

141 s e l f . label_38 . setGeometry ( QRect ( 4 30 , 4 90 , 71 , 81) )

142 s e l f . v alor_abe lha = v a l o r e s ( s e l f . c e n t r a l w i d g e t )

143 s e l f . valor_abelha . setObjectName ( u"valor_abelha")

144 s e l f . valor_abelha . setGeometry ( QRect (21 0 , 490 , 71 , 81) )

145 s e l f . v alor_ abelha . s e t S t y l e S h e e t ( u"font: 87 40pt \" A r i a l \";")

146 s e l f . v a l o r _ f l o r = v a l o r e s ( s e l f . c e n t r a l w i d g e t )

147 s e l f . v a l o r _ f l o r . setObjectName ( u"valor_flor")

148 s e l f . v a l o r _ f l o r . setGeometry ( QRect ( 52 0 , 490 , 7 1 , 8 1) )

149 s e l f . v a l o r _ f l o r . s e t S t y l e S h e e t ( u"font : 87 40pt \" A r i a l \";")

150 s e l f . va lor _m el = v a l o r e s ( s e l f . c e n t r a l w i d g e t )

151 s e l f . valor_mel . setObjectName ( u" valor_mel " )

152 s e l f . valor_mel . setGeometry ( QRect ( 8 40 , 4 90 , 71 , 81) )

153 s e l f . valor_mel . s e t S t y l e S h e e t ( u"font : 87 40pt \" A r i a l \";")

154 s e l f . pushButton = QPushButton ( s e l f . c e n t r a l w i d g e t )

155 s e l f . pushButton . setObjectName ( u"pushButton")

156 s e l f . pushButton . setGeometry ( QRect ( 3 40 , 5 90 , 251 , 71) )

157 s e l f . pushButton . s e t S t y l e S h e e t ( u"font : 87 40pt \" A r i a l \";")

158 s e l f . w id ge t_ es co nd id a = e sco ndido ( s e l f . c e n t r a l w i d g e t )

159 s e l f . widget_escondida . setObjectName ( u"widget_escondida" )

160 s e l f . widget_escondida . setGeometry ( QRect (1 0 , 10 , 9 31 , 6 61) )

161 s e l f . widge t_esco nd ida . s e t S t y l e S h e e t ( u"background -color: rgb (170 ,

170 , 170) ;" )

162 s e l f . pushButton_2 = QPushButton ( s e l f . widget_es condida )

163 s e l f . pushButton_2 . setObjectName ( u"pushButton_2")

164 s e l f . pushButton_2 . setGeometry ( QRect (35 0 , 570 , 251 , 71) )

Capítulo 2. Desenvolvimento dos jogos 181

165 s e l f . pushButton_2 . s e t S t y l e S h e e t ( u" background - color: rgb (240, 240 ,

240);font : 87 40pt \" A r i a l \";")

166 s e l f . h o r i z o n t a l S l i d e r = medi a _ s lider ( s e l f . widget_escondida )

167 s e l f . h o r i z o n t a l S l i d e r . setObjectName ( u" horizontalSlider " )

168 s e l f . h o r i z o n t a l S l i d e r . setGeometry ( QRect ( 40 , 5 30 , 851 , 31) )

169 s e l f . h o r i z o n t a l S l i d e r . s e t O r ie n t a t i o n ( Qt . H or izo nt a l )

170 s e l f . l a b e l = c l i c k l a b e l ( s e l f . widget_escondi da )

171 s e l f . l a b e l . setObjectName ( u"label" )

172 s e l f . l a b e l . setGeometry ( QRect ( 330 , 160 , 271 , 191) )

173 s e l f . l a b e l . s e t S t y l e S h e e t ( u" background -color : rgb(0, 0, 0);" )

174 s e l f . l a b e l . setPixmap ( QPixmap( u":/imagens /play " ) )

175 s e l f . l a b e l . s e t S c a l e d C o n t e n t s ( True )

176 s e l f . widget = v ideo ( s e l f . widget_escondi da )

177 s e l f . widget . setObjectName ( u" widget " )

178 s e l f . widget . setGeometry ( QRect ( 0 , 0 , 931 , 521) )

179 s e l f . widge t . s e t S t y l e S h e e t ( u" background -color : rgb(0, 0, 0);" )

180 s e l f . widget . r a i se_ ( )

181 s e l f . pushButton_2 . ra i se_ ( )

182 s e l f . h o r i z o n t a l S l i d e r . ra i se_ ( )

183 s e l f . l a b e l . ra i se_ ( )

184 MainWindow . s et Ce nt ralWidget ( s e l f . c e n t r a l w i d g e t )

185 s e l f . valor_mel . r ais e _ ( )

186 s e l f . v a l o r _ f l o r . r ais e_ ( )

187 s e l f . valor_abelha . ra i se_ ( )

188 s e l f . l a b e l _ 2 . ra i se_ ( )

189 s e l f . label_25 . r ais e _ ( )

190 s e l f . l a b e l _ 3 . ra i se_ ( )

191 s e l f . l a b e l _ 4 . ra i se_ ( )

192 s e l f . l a b e l _ 5 . ra i se_ ( )

193 s e l f . l a b e l _ 6 . ra i se_ ( )

194 s e l f . l a b e l _ 7 . ra i se_ ( )

195 s e l f . l a b e l _ 8 . ra i se_ ( )

196 s e l f . l a b e l _ 9 . ra i se_ ( )

197 s e l f . label_10 . r ais e _ ( )

198 s e l f . label_11 . r ais e _ ( )

199 s e l f . label_12 . r ais e _ ( )

200 s e l f . label_13 . r ais e _ ( )

201 s e l f . label_14 . r ais e _ ( )

202 s e l f . label_15 . r ais e _ ( )

203 s e l f . label_16 . r ais e _ ( )

204 s e l f . label_17 . r ais e _ ( )

205 s e l f . label_18 . r ais e _ ( )

206 s e l f . label_19 . r ais e _ ( )

207 s e l f . label_20 . r ais e _ ( )

208 s e l f . label_21 . r ais e _ ( )

209 s e l f . label_22 . r ais e _ ( )

210 s e l f . label_23 . r ais e _ ( )

Capítulo 2. Desenvolvimento dos jogos 182

211 s e l f . label_24 . r ais e _ ( )

212 s e l f . label_26 . r ais e _ ( )

213 s e l f . label_27 . r ais e _ ( )

214 s e l f . label_28 . r ais e _ ( )

215 s e l f . label_29 . r ais e _ ( )

216 s e l f . label_30 . r ais e _ ( )

217 s e l f . label_31 . r ais e _ ( )

218 s e l f . label_32 . r ais e _ ( )

219 s e l f . label_34 . r ais e _ ( )

220 s e l f . label_35 . r ais e _ ( )

221 s e l f . label_37 . r ais e _ ( )

222 s e l f . label_38 . r ais e _ ( )

223 s e l f . pushButton . ra i se_ ( )

224 s e l f . widget_escondida . ra i se_ ( )

225

226 s e l f . r e t r a n s l a t e U i (MainWindow )

227 s e l f . pushButton . c l i c k e d . c onnect ( s e l f . c e n t r a l w i d g e t . v e r i f i c a r )

228 s e l f . l a b e l . c l i c k . connect ( s e l f . widget_es condida . play_video )

229 s e l f . widget . c l i c k . connect ( s e l f . widget_es condida . play_video )

230 s e l f . h o r i z o n t a l S l i d e r . s l i derMoved . connect ( s e l f . widget_escondi da .

set_position)

231 s e l f . pushButton_2 . c l i c k e d . c o nnect ( MainWindow . c l o s e )

232

233 QMetaObject . connectSlotsByName ( MainWindow)

234 # setupUi

235

236 de f r e t r a n s l a t e U i ( s e l f , MainWindow ) :

237 MainWindow . setWindowTitle ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,

u"MainWindow" , None ) )

238 s e l f . l a b e l _ 2 . s e t T e x t ( "" )

239 s e l f . l ab e l _ 2 5 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >

Desafio :

Descubra o valor da abelha , da flor e do mel <p align =\"

center \"> para de scobrir como \ u00e9

feito o mel </body ></html >" , None ) )

240 s e l f . l ab el _3 . setText ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >2 </body > </ html >" , None ) )

241 s e l f . l a b e l _ 4 . s e t T e x t ( "" )

242 s e l f . l ab el _5 . setText ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >+ </body > </ html >" , None ) )

243 s e l f . l a b e l _ 6 . s e t T e x t ( "" )

244 s e l f . l ab el _7 . setText ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >-</body ></html >" , None ) )

Capítulo 2. Desenvolvimento dos jogos 183

245 s e l f . l ab el _8 . setText ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >-</body ></html >" , None ) )

246 s e l f . l ab el _9 . setText ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >= </body > </ html >" , None ) )

247 s e l f . l ab e l _ 1 0 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >1 </body > </ html >" , None ) )

248 s e l f . l ab e l _ 1 1 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >2 </body > </ html >" , None ) )

249 s e l f . l ab e l _ 1 2 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >-</body ></html >" , None ) )

250 s e l f . l a b e l _ 1 3 . s e t T e x t ( "" )

251 s e l f . l a b e l _ 1 4 . s e t T e x t ( "" )

252 s e l f . l ab e l _ 1 5 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >2 </body > </ html >" , None ) )

253 s e l f . l ab e l _ 1 6 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >= </body > </ html >" , None ) )

254 s e l f . l ab e l _ 1 7 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >-</body ></html >" , None ) )

255 s e l f . l ab e l _ 1 8 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >7 </body > </ html >" , None ) )

256 s e l f . l a b e l _ 1 9 . s e t T e x t ( "" )

257 s e l f . l ab e l _ 2 0 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >-</body ></html >" , None ) )

258 s e l f . l a b e l _ 2 1 . s e t T e x t ( "" )

259 s e l f . l a b e l _ 2 2 . s e t T e x t ( "" )

260 s e l f . l ab e l _ 2 3 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >= </body > </ html >" , None ) )

261 s e l f . l ab e l _ 2 4 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >-</body ></html >" , None ) )

262 s e l f . l a b e l _ 2 6 . s e t T e x t ( "" )

263 s e l f . l ab e l _ 2 7 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >* </body > </ html >" , None ) )

264 s e l f . l a b e l _ 2 8 . s e t T e x t ( "" )

265 s e l f . l a b e l _ 2 9 . s e t T e x t ( "" )

Capítulo 2. Desenvolvimento dos jogos 184

266 s e l f . l ab e l _ 3 0 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >3 </body > </ html >" , None ) )

267 s e l f . l a b e l _ 3 1 . s e t T e x t ( "" )

268 s e l f . l ab e l _ 3 2 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >= </body > </ html >" , None ) )

269 s e l f . l a b e l _ 3 4 . s e t T e x t ( "" )

270 s e l f . l ab e l _ 3 5 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >= </body > </ html >" , None ) )

271 s e l f . l a b e l _ 3 7 . s e t T e x t ( "" )

272 s e l f . l ab e l _ 3 8 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >= </body > </ html >" , None ) )

273 s e l f . pushButton . s et Te xt ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"

Verificar" , None ) )

274 s e l f . pushButton_2 . setText ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,

u"Fechar" , None ) )

275 s e l f . l a b e l . s e t T e x t ( "" )

276 # r e t r a n s l a t e U i

Código 32 – Código da classe Ui_MainWindow criada no QT Designer

2.3.17.1 Criando as classes valores e clicklabel

Na subsecção anterior fora copiado a classe Ui_MainWindow, sendo que não tem

necessidade de mudar, apenas copia-la, nessa subsecção vamos começar a criar às classes

valores e clicklabel, que utilizamos na interface, sendo elas, valores do QLineEdit e clicklabel

da QLabel, na classe valores estamos usando para deﬁnir quais caracteres são aceitas nos

editores de texto QLineEdit, para fazer isso precisamos usar um validador de caracteres,

o QRegExp e QRegExpValidator, nesse caso vamos validar apenas dois numeros, então

usamos dentro das aspas, um colchetes para cada casa do texto, e dentro do colchetes

quais os valores aceitos, nesse caso a primeira caso aceita de 1 até 9 e a segunda casa

aceita de 0 até 9, para mais informações pode ser encontradas no site do QT em (QT,l;

QT,k), também vamos alinhar o texto dentro do Qlineedit para o centro, podendo ser

obersavdo com ser feitos no site do QT em (QT,r) ou em outros sites ao pesquisar como

em (INOSíVEL,2019) e na clicklabel fazemos com que a imagem do play possa ser clicada,

como feito na criação do jogo da memoria em ??

, porém vamos pegar apenas a parte de acionar ao clicar.

1#Criando a nova c l a s s e v a l o r e s baseado no QLineEdit , para d e f i n i r um

v a l i d a d o r de t ext o , p ermitindo ap enas e s c r e v e r números de 1 a 99 no

i nput de t e x t o

2class v a l o r e s ( QLineEdit ) :

Capítulo 2. Desenvolvimento dos jogos 185

3#Criando a fun ç ão de i n i c i a l i z a ção , que se executa cada vez que o

programa c r i a uma nova QLineEdit u t i l i z a n d o a c l a s s e v a l o r e s

4de f __init__ ( s e l f , parent=None ) :

5#G ar antindo su a exe cu ç ã o

6super ( ) . __init__ ( p aren t )

7#Def i nindo q ua l é seu v alida dor , u t i l i z a n d o o QRegExpValidator , com o

p r o p r i o o b j e t o e QRegExp pas sa ndo q u a i s s ã o o s p o ss í v e i s c a r a c t e r e s p or

c asa r e p r e s e n t a d o po r [ ] , n e s s e c a so s ó v a l i d a d e duas c a s a s por i s s o

apena s d o i s [ ] , sen do a p r i m e i r a c a s o a c e i t a n d o e n t r e 1 e 9 , o s i n a l de

menos s e r e p r e s e n t a e n t r e o s v a l o r e s , e su a s egu nda c a sa a c e i t a n d o e n t r e

0 e 9

8s e l f . s e t V a l i d a t o r ( QRegExpValidator ( QRegExp( "[1-9][0 -9] " ) , s e l f ) )

9#Def i nindo que os t e x t o s vão e s t a r c e n t r a l i z a d o s ao e s c re v e r

10 s e l f . setAlign m ent ( Qt . AlignCent e r )

13 #Criando a nova c l a s s e c l i c k l a b e l baseado na QLabel , para a di c i o na r a fun ç ã

o de c l i c k

14 class c l i c k l a b e l ( QLabel ) :

15 #Criand o o s i n a l que f o i c r i a d o no e d i t o r de s i n a i s no QT Desi gn er , é

i mp orta n te t e r o mesmo nome , n e s s e c a so c l i c k .

16 c l i c k = S i g n a l ( )

17 #Mudando a f un ç ã o padr ã o do c l i c k do mouse , par a f a z e r a l g o e x t r a .

18 de f mousePressEvent ( s e l f , e v ent ) :

19 #Adicionando que apó s c l i c a r com o mouse e l e emita o s i n a l c l i c k .

20 s e l f . c l i c k . emit ( )

Código 33 – Criando classe especial valores, e a classe especial clicklabel

2.3.18 Criando a classe widget_principal

Na subsecção anterior fora criado a classe valores e clicklabel, nessa subsecção

vamos criar a classe classe especial widget_principal do QWidget onde se faz a veriﬁcação

se os valores estão corretos, e caso não esteja deixe a borda vermelha e foca no errado,

e caso seja correta, deixe a borda verde e trave para não poder ser mudado, para isso

vamos começar criando algumas variáveis como na subsecção 2.2.8.7, para armazenar quais

respostas então corretas, e criando uma função para fazer sua veriﬁcação, pegando seus

ﬁlhos com os nomes especíﬁcos como na subsecção 2.2.8.7, os quais veriﬁcaremos se o valor

escrito está correto, no caso da abelha se é número 3, caso seja seta a variável abelha para

verdadeiro, e muda a borda do texto para verde, mudando seu stylesheet podendo ser

veriﬁcado no site do QT em (QT,q) ou fazer uma pesquisa para o caso especiﬁco como

por exemplo em (ALPHANUMERIC,2014), porém nesse caso nos vamos apenas adicionar

a cor da borda, deﬁnindo o stylesheet com a fonte primeiro com e depois adicionando o

estilo da borda após o ponto e virgula( ; ) como na subsecção 2.3.10.1, tendo mudado

Capítulo 2. Desenvolvimento dos jogos 186

seu estilo vamos travar a edição do texto mudando de habilitado para falso, caso o valor

seja diferente de três se foca no editor de texto usando o setFocus() e mudamos a cor da

borda para vermelho, depois se repete para a ﬂor e o pote de mel, com seus valores 9 e 27

respetivamente, depois das veriﬁcações fazemos mais uma veriﬁcação se todos os valores

estão corretos, caso estejam criamos uma mensagem como na subsecção 2.2.11, criamos

seu titulo como Parabéns, e o texto como Parabéns os valores estão certos. Continue agora

com o vídeo : Produzindo mel, o qual depois vamos mudar sua formatação na próxima

subsecção, e deﬁnimos o botão como OK e que por padrão vai acionar o botão OK, e

por ﬁm veriﬁcamos se o botão OK fora acionado para achar o ﬁlho da widget que está

escondido mudando para falso, o tornando visível.

1#Criand o a nova c l a s s e w i d g e t _ p r i n c i p a l ba se ado na QWidget , onde s e f a z a

v e r i f i c a ç ão se os v a l o r e s e st ão ce rt o s , e caso e s t e j a mostre um mensagem

, e cada v a l o r c o r r e t o f i q u e com bord a v erde , e o s e r r a d o s com bo rda

ve rmelha e f oque n e l e .

2class widget_principal(QWidget) :

3#Criando a fun ç ão de i n i c i a l i z a ção , que se executa cada vez que o

programa c r i a um novo w i dg et u t i l i z a n d o a c l a s s e w i d g e t _ p r i n c i p a l

4de f __init__ ( s e l f , parent=None ) :

5#G ar antindo su a exe cu ç ã o

6super ( ) . __init__ ( p aren t )

7#Criando as v a r i á v e i s de v e r i f i c a ç ão s e o v a l o r e s e st ão c o r r e t o s ou não

, por padr ão va i c r i a r como f a l s o , para abelha , f l o r e mel

8s e l f . abelha = Fa l se

9s e l f . f l o r = Fa l se

10 s e l f . mel = Fa l se

12 #Cr ia ç ão dos s l o t s , os r e c e p t o r e s do s i n a l c l i c k ed , para i s s o sempre a

fun ç ão tem que t e r o nome do s l o t , d e f i n i d o no QT D esigner , e s e r

d e f i n i d o @ sl ot ( ) a ntes da fun ç ão

13 @Slot ( )

14 de f v e r i f i c a r ( s e l f ) :

15 #Aqui nó s pegamos o QLineEdit e armazenamos na v a r i á vel , para i s s o

vamos u sar o f i n d c h i l d , passando o t i p o QLineEdit e o nome d ele , por

i s s o que é i mpo rtan te t e r mudado s eu nome no QT D es ig ner , p o i s no w id ge t

p o s s u i 3 d i f e r e n t e s , que é ne ce s s á r i o e s p e c i f i c á l o s

16 #Criando as v a r i á v e i s possuindo o nome do QLineEdit , para f i c a r mais f á

c i l sua i d e n t i f i c a ç ão enquanto se t r a b al h a com e l a s

17 v al or_abelha = s e l f . f i n d C h i l d ( QLineEdit , "valor_abelha")

18 v a l o r _ f l o r = s e l f . f i n d C h i l d ( QLineEdit , "valor_flor")

19 va lor_mel = s e l f . f i n d C h i l d ( QLineEdit , " valor_mel" )

21 #Aqui v e r i f i c a m o s s e o t e xt o do valor_ab elha c ond iz com o número da

abelha , 3 , para i s s o usamos a fun ç ão d i spla y Text ( ) do QLineEdit e

comparamos com o v a l o r 3 em forma de t e x t o " 3 "

22 i f ( valor_a belha . d i spla yTex t ( ) == "3") :

Capítulo 2. Desenvolvimento dos jogos 187

23 #Se o v a l o r f o r 3 , d e f i n i m o s que o v a l o r da a b elha e s t á c o r r e t o ,

passando para a v a r i a v e l a be lh a o va l or True

24 s e l f . abelha = True

25 #Aqui d ef in i mo s o e s t i l o da QLineEdit chamada valor_abelha , mantendo

o t i p o de f onte , e a d ici on a n do uma borda s ó l i d a verde , de 1 p i x e l , com

border : 1px s o l i d green ;

26 valor_abelh a . s e t S t y l e S h e e t ( u"font: 87 40pt \" A r i a l \";border: 1px

solid green;" )

27 #Aqui d e f i n i m o s que a QL in eEdit chamada val o r_ ab elh a , nã o e s t á ma is

h a b i l it a d a para e s c r i t a , travando e l a

28 valor_abelh a . s e tEnabled ( F a ls e )

29 #Aqui v e r i f i c a m o s s e todas as o u tra s v e r i f i c a ç õ e s falharam , resumindo o

v a l o r não e r á 3

30 e l s e :

31 #Se o v a l or e ra d i f e r e n t e de 3 , f o ca na QLineEdit chamada

valor_abelha

32 valor_abelh a . set Fo cus ( )

33 #Aqui d ef in i mo s o e s t i l o da QLineEdit chamada valor_abelha , mantendo

o t i p o de f onte , e a d ici on a n do uma borda s ó l i d a vermelha , de 1 p i x e l ,

com b o r der : 1px s o l i d red ;

34 valor_abelh a . s e t S t y l e S h e e t ( u"font: 87 40pt \" A r i a l \";border: 1px

solid red;" )

36 #Aqui r e petim o s a v e r i f i c a ç ão que f o i f e i t a para a abelha , mudando para

f l o r , e s e o v a l o r é 9 .

37 #Aqui v e r i f i c a m o s s e o t e xt o do v a l o r _ f l o r c on diz com o número da f l o r ,

9 , para i s s o usamos a fun ç ão d i s playT e x t ( ) do QLineEdit e comparamos

com o v a l o r 9 em f orm a de t e x t o " 9 "

38 i f ( v a l o r _ f l o r . d i spla yTex t ( ) == "9") :

39 #Se o v a l o r f o r 9 , d e f i n i m o s que o v a l o r da f l o r e s t á c o r r e t o ,

passando para a v a r i a v e l f l o r o v al or True

40 s e l f . f l o r = True

41 #Aqui d e f i n i m o s o e s t i l o da QLineEdit chamada v a l o r _ f l o r , mantendo o

t i p o de f onte , e a d icio nando uma borda s ó l i d a v erde , de 1 p i x e l , com

border : 1px s o l i d green ;

42 v a l o r _ f l o r . s e t S t y l e S h e e t ( u"font : 87 40pt \" A r i a l \";border: 1px solid

green;" )

43 #Aqui d e f i n i m o s que a QLineEdit chamada v a l o r _ f l o r , nã o e s t á mais

h a b i l it a d a para e s c r i t a , travando e l a

44 v a l o r _ f l o r . setEnabled ( Fa lse )

45 #Aqui v e r i f i c a m o s s e todas as o u tra s v e r i f i c a ç õ e s falharam , resumindo o

v a l o r não e r á 9

46 e l s e :

47 #Se o v a l or e ra d i f e r e n t e de 9 , f o ca na QLineEdit chamada v al o r_ f lo r

48 v a l o r _ f l o r . s etFocus ( )

49 #Aqui d e f i n i m o s o e s t i l o da QLineEdit chamada v a l o r _ f l o r , mantendo o

t i p o de f onte , e a d icio nando uma borda s ó l i d a ver melha , de 1 p i x e l , com

Capítulo 2. Desenvolvimento dos jogos 188

border : 1px s o l i d re d ;

50 v a l o r _ f l o r . s e t S t y l e S h e e t ( u"font : 87 40pt \" A r i a l \";border: 1px solid

red;" )

52 #Aqui r e petim o s a v e r i f i c a ç ão que f o i f e i t a para a abelha , mudando para

mel , e s e o v a l o r é 2 7 .

53 #Aqui v e r i f i c a m o s s e o t e xt o do valor_mel c on diz com o número da mel ,

27 , para i s s o usamos a fun ç ão d i spla y Text ( ) do QLineEdit e comparamos

com o v a l o r 27 em forma de t e x t o " 2 7 "

54 i f ( valor_mel . d isp layT ext ( ) == "27" ) :

55 #Se o v a l o r f o r 27 , d e f i n i m o s que o v a l o r da mel e s t á c o r r e t o ,

passando para a v a r i a v e l mel o v a lo r True

56 s e l f . mel = True

57 #Aqui d ef in i mo s o e s t i l o da QLineEdit chamada valor_mel , mantendo o

t i p o de f onte , e a d icio nando uma borda s ó l i d a v erde , de 1 p i x e l , com

border : 1px s o l i d green ;

58 valor_mel . s e t S t y l e S h e e t ( u"font : 87 40pt \" A r i a l \";border: 1px solid

green;" )

59 #Aqui d e f i n i m o s que a QL in eEdit chamada va lo r_mel , nã o e s t á mai s

h a b i l it a d a para e s c r i t a , travando e l a

60 valor_mel . setEnabled ( Fal s e )

61 #Aqui v e r i f i c a m o s s e todas as o u tra s v e r i f i c a ç õ e s falharam , resumindo o

v a l o r não e r á 27

62 e l s e :

63 #Se o v a l or e ra d i f e r e n t e de 27 , f oc a na QLineEdit chamada valor_mel

64 valor_mel . s etFoc us ( )

65 #Aqui d ef in i mo s o e s t i l o da QLineEdit chamada valor_mel , mantendo o

t i p o de f onte , e a d icio nando uma borda s ó l i d a ver melha , de 1 p i x e l , com

border : 1px s o l i d re d ;

66 valor_mel . s e t S t y l e S h e e t ( u"font : 87 40pt \" A r i a l \";border: 1px solid

red;" )

68 #Aqui v e r i f i c a m o s s e todos os v a l o r e s e s t ão c e rt os , v e r i f i c a n d o as v a r i

á v e i s a belh a , f l o r e mel s ã o v e r d a d e i r a s .

69 i f ( s e l f . a b e lha and s e l f . f l o r and s e l f . mel ) :

70 #Caso s e j a vamos c r i a r um popup de mensagem

71 msgBox = QMessageBox ( )

72 #Aqui d e f i n i m o s o t í t u l o do popup de mensagem

73 msgBox . setWi ndowTitle ( u"Parab éns" )

74 #Aqui d e f i n i m o s q ua l a mensagem do popup de mensagem Parab é n s os

v a l o r e s e st ão c e r t o s . Continue agor a com o v í deo : Produzindo mel , mais

pa ra f i c a r com i nden ta ç ão , l e t r a gran de e nt r e o ut ra s c o i s a s , s e u t i l i z a

o QT D esigner para d e f i n i r seu e s t i l o , c r ian d o uma l ab e l , e apertando

change r i c h te xt , e s cr eve ndo e dei xando como desejado , d e p o i s s ó c o p i a r

o campo t ex t , no e d i t o r de pr op ried ades , onde t er á s um c ó digo enorme ,

come ç ando com <html>

75 msgBox . s etText ( u’Parabéns os valores estão certos. Continue agora com

Capítulo 2. Desenvolvimento dos jogos 189

o vídeo : Produzindo mel ’ )

76 #Aqui d e f i n i m o s q ua l o bo t ão do popup de mensagem , n e s s e c a so um bo t ã

o OK

77 msgBox . s e tSt a ndardBu t tons ( QMessageBox . Ok)

78 #Aqui d e f i n i m o s q ua l o bo t ão do popup de mensagem é o pad r ão , p ara

c as o a p e r t e ESC, Ent er , Spa ce no t e c l a d o , a c i o n e o bot ã o

79 msgBox . s e t De f au lt B ut to n ( QMessageBox . Ok)

80 #Aqui v e r i f i c a m o s s e a mensagem f o i executada , no c aso acionad o algum

bot ão

81 r e t = msgBox . exec_ ( )

82 #Aqui v e r i f i c a m o s s e o bot ão a cion ado f o i Ok

83 i f r e t == QMessageBox . Ok :

84 #Caso tenha s i d o s e l e c i o n a d o Ok, s e p roc ura o f i l h o QWidget da

c l a s s e es condida , como e l e tem mais de um f i l h o QWidget , é i mportant e

t e r nomeado o wid get p ara w id ge t_ es co nd id a , ap ó s a cha r d e f i n i m o s que e l e

não é mais ocu l t a , aparecendo na t e l a

85 s e l f . f i n d C h i l d ( QWidget , u" widget_escondida " ) . setHidden ( F a lse )

Código 34 –

Criando a classe especial widget_principal, onde se faz as veriﬁcações se os

valores estão corretos

2.3.18.1 Criando o texto formatado

Na subsecção anterior criamos a classe especial do widget_principal, onde se faz as

veriﬁcações se os valores estão corretos, e caso estejam abre uma mensagem de parabéns

antes de começar o vídeo da produção de mel, nessa subsecção vamos veriﬁcar a criação

do texto especial para a mensagebox criado na subsecção anterior, abrindo o QT Designer

e criando uma nova interface e adicionando uma label, para mudar seu texto formatado,

usando o change rich text, 149, para deﬁnir seu estilo nesse caso usada tamanho 20 para a

primeira e segunda linha, e tamanho 28 para a terceira linha, deixando a pontuação do

ﬁnal da primeira linha e segunda em negrito, juntamente com a terceira linha inteira em

negrito, 150, com todo o texto centralizado, ao conﬁrmar, no editor de propriedades, na

aba QLabel, em seu primeiro campo, text, ﬁcou um código, sobre o texto que acabamos

de criar, 151, copiamos o código para adicionar na mensagebox.

Capítulo 2. Desenvolvimento dos jogos 190

Figura 149 –

Criando novo aplicativo, com uma label e selecionando para criar um texto

formatado

Figura 150 –

Deﬁnindo o texto formatado a ser usado na caixa de mensagem, com sua for-

matação centralizada com tamanho 20 nas duas primeiras linhas, pontuação

em negrito e sua terceira linha inteira em negrito com tamanho 28

Capítulo 2. Desenvolvimento dos jogos 191

Figura 151 – Copiando o código HTML, gerado pela formatação do texto

2.3.18.2 Arrumando o msgBox.setText() para o texto formatado

Na subsecção anterior fora criado o texto especial formatado, nessa subsecção

vamos pegar o código 35 em HTML gerado pela QT Designer, para ﬁcar mais visível

pode se indentar as linhas deixando parecido com o codigo 36, tendo o código 35 vamos

inserir no msgBox.setText() usando u antes para deﬁnir que vai ser unicode e usando

aspas simples, pois o código vem escrito com aspas duplas, substituindo o código 37 pelo

código 38 onde está com o formato correto, depois de ter copiado o código HTML gerado

no QT Designer e arrumado o código 34, só fechar o QT Designer, não é necessário salvar,

pois a única coisa que precisávamos era converter o texto para código HTML.

1<html><head/><body>Parabé

ns os v a l o r e s es t ão c e r t o s <span s t y l e=" font - size :20 pt; font -

weight :600; "> ! Continue agor a com

o v í deo :<

/p>

Pr oduzindo mel</body></ html>

Código 35 –

Código HTML gerado, na aba de text após conﬁrmar a formatação do texto

no QT Designer, conforme imagem 151

1<html>

2<head/>

3<body>

4

5

Capítulo 2. Desenvolvimento dos jogos 192

6Parab é ns os v a l o r e s e st ã o c e r t o s

7

8

10

11

12 Continue agor a com o v í deo

13

14

15 :

16

17

18

19

20 Produzindo mel

21

22

23 </body>

24 </html>

Código 36 – Código 35, após realizar a indentação das linhas

1msgBox . s etText ( u’Parabéns os valores estão certos. Continue agora com o ví

deo : Produzindo mel ’ )

Código 37 – Linha 75 do código 34 a ser mudada pelo código 35

1msgBox . s etText ( u’<html ><head /><body ><span style =" font -

size :20 pt;">Parabéns os valores estão certos <span style =" font -

size :20 pt ; font - weight :600;" >!

Continue agora com o ví deo <span style =" font - size :20 pt; font -

weight :600;" >: < span style =" font -size :28 pt;

font -weight :600;" >Produzindo mel </body ></html >’)

Código 38 –

Visualização de como deve ﬁcar a linha 75 do código 34 após ter seu conteúdo

mudado pelo código 35

2.3.19 Criando as classes especiais

media_slider do QSlider, e por ﬁm o vídeo da QWidget onde se vai rodar o vídeo,

porém vamos baseá-lo no QVideoWidget, ao invés do QWidget„

2.3.20 Criando a classe escondido

Na subsecção anterior fora arrumado a mensagem para ﬁcar com a formatação

correta, nessa subsecção vamos criar a classe escondido referente ao player de vídeo,

Capítulo 2. Desenvolvimento dos jogos 193

sendo a classe escondido do QWidget onde ﬁca escondido até a veriﬁcação dos valores

estarem certas, e receber o comando para se tornar visível da widget_principal, como foi

utilizado no jogo da memoria no código 24, para criação do vídeo temos varias opções

ao se pesquisar desde maneiras simples como em (DENLORD,2018), até outros mais

complexos com seleção de vídeo do computador encontrado em (PARK,2017), até outras

bibliotecas para tocar vídeos o QGraphicsView, que permite trabalhar com a label de

reprodução de vídeo, tendo como exemplo de sua utilização em (FBENCE,2017),porém é

mais pesado e lerdo que o QMediaPlayer, podendo se veriﬁcar sua comparação no fórum

do QT em (ZAHI.MASHAEL,2017), por esse motivo fora escolhido trabalhar com o

QMediaPlayer, pegando como base para a criação a explicação encontrada no site do

QT em (QT,g) e no site encontrado sobre como criar um tocador de media no PyQt5

em (FOROGH, ), com a barra de andamento que pode ser mudada, e pausar o vídeo

a qualquer momento, caso queira colocar ao invez de poder mudar o andamenteo do

video arrastando a barra, para que vá ao local clicado na barra de andamente, pode ser

encontrado um exemplo em (EAMONN,2018), agora voltando ao código, vamos começar

deﬁnindo que a widget vai estar escondida, e começamos a criar o vídeo, deﬁnindo o media

player, o local do video, e que o video a ser executado se encontra no local do video, e caso

o estado do video mude, vai acionar a função mediastate_changed, criando um link direto

no código, depois usamos o código de pintura usado na criação do jogo de memoria, que

serve para que a cor de fundo funcione, e começamos a criar as funções referente a execução

do vídeo, play_video que serve para começar ou para o video, fazendo uma veriﬁcação

se está tocando pare e caso contrario começe a tocar, proxima é o mediastate_changed,

que executa toda vez que o estado do video mudar, sendo primeiro se o video começar a

tocar vai fazer a imagem de play ﬁcar escondida, para não ﬁcar na frente do video, e caso

o video esteja sem tocar ainda, no caso terminou ou não apertou play ainda, vai tornar a

imagem de play visivel, e por ultimo uma função que seta a posição do vídeo.

1#Criando a nova c l a s s e escond i d o baseado no QWidget , para torn á−l o i n v i s í

v e l e a d i c i o n a r o p l a y e r de v í deo .

2class e sco ndid o ( QWidget ) :

3#Criando a fun ç ão de i n i c i a l i z a ção , que se executa cada vez que o

programa c r i a um novo widget u t i l i z a n d o a c l a s s e e scondi d o

4de f __init__ ( s e l f , parent=None ) :

5#G ar antindo su a exe cu ç ã o

6super ( ) . __init__ ( p aren t )

7#Aqui e stamos d e f i n i n d o que a w id ge t e sco ndido é para e s t a r es con dida ,

para i s s o usamos a fun ç ão setHidden passando o par âmetro True , para que

quando f o r c r i a d o a t e l a e s t e j a e sco ndi da

8s e l f . setHidden ( True )

9#Aqui c ri a mo s um p l a y e r de v í deo , usando o QMediaPlayer , como um

componente da c l a s s e e s c ondido

10 s e l f . mediaPlayer = QMediaPlayer ( None , QMediaPlayer . V i d e oSurface )

11 #Aqui criamos uma v a r i a v e l para armazenar o caminho do video , usando a

Capítulo 2. Desenvolvimento dos jogos 194

fun ç ã o r es o ur ce_p a th ( ) que cria m os no come ç o do arq uiv o , para p eg ar o

caminho r e l a t i v o , que f u n c i o n e p ara c r i a ç ão de e x ec ut á v e i s ou como c ó

digo normal

12 l o c a l _ v i d e o = reso urce_ path ( u" video/mel.avi" )

13 #Aqui d e f i ni mo s q ual v a i s e r o v í deo , usando QMediaContent , e d e f i n i n d o

que é l o c a l com QUrl . f r o m L o c a l F i l e e p as sand o como p ar â metro o caminho

armazenado na v a r i a v e l l oc al_ vid eo , c r i a d a a n te ri orm en te

14 s e l f . m ed ia Pl ay er . s et Med ia ( QMediaContent ( QUrl . f r o m L o c a l F i l e ( l o c a l _ v i d e o )

) )

15 #Aqui c ri a mo s um l i n k p ar a o p l a y e r de v í deo , para c a so o e s t a do mude

um s i n a l chamado stateChanged , a c i on e que o e stado mudou , um r e c e p t o r

me di ast at e_c ha nge d , c r i a d o na pr ó p r i a c l a s s e

16 s e l f . mediaPlayer . stateChanged . c o n n ect ( s e l f . mediastate_changed )

18 #Essa fun ç ão mo d if i ca o e f e i t o de pintu r a , p o i s widgets promovidas não

ace ita m pl ano de fundo , por i s s o p r e c i s a −s e mudar s ua fun ç ã o n ati v a , não

p re ci sa ndo mexer , tendo em vá r i o s l u g a r e s seu c ó d ig o pron to .

19 de f p aintE vent ( s e l f , pe ) :

20 o = QStyleOption ()

21 o . init From ( s e l f )

22 p = QPainter ( s e l f )

23 s e l f . s t y l e ( ) . drawPrimitive ( QStyle . PE_Widget , o , p , s e l f )

25 #Criando fun ção play_video , para d e f i n i r se o v í deo e s t á tocando ou

parado , mudando seu comportamento

26 de f play_video ( s e l f ) :

27 #V e r i f i c a se o es t ado do vid e o e st á tocando

28 i f s e l f . mediaPlayer . s t a t e ( ) == QMediaPlayer . P lay ing Sta te :

29 #Caso o v í deo e s t e j a tocando , mudamos seu e stado para parado usando a

fun ç ã o p ause ( )

30 s e l f . mediaPlayer . pause ( )

31 #Aqui v e r i f i c a m o s s e todas as o u tra s v e r i f i c a ç õ e s falharam , resumindo

s e o e sta do do v ideo não e s t á tocando

32 e l s e :

33 #Caso o v í deo não e s t e j a tocando , mudamos seu est a d o para tocando

usando a fu n ç ã o p lay ( )

34 s e l f . mediaPlayer . play ( )

36 #Criando a fun ção para v e r i f i c a ç ão s e e st á tocando o v í deo , ou e st á

desativado

37 de f mediastate_changed ( self , state ) :

38 #Aqui s e v e r i f i c a s e o esta d o do vid e o e s t á tocando

39 i f s e l f . mediaPlayer . s t a t e ( ) == QMediaPlayer . P lay ing Sta te :

40 #Caso e s t e j a t oc an do , d e f i n i m o s que a imagem do p lay f i c a

tr ansp a rent e , para não f i c a r na f r e n t e do v í deo

41 s e l f . f in dC h i l d ( c l i c k l a b e l ) . setH idden ( True )

42 #Aqui s e v e r i f i c a s e o e s t a do do v i d e o e s t á d e s l i g a d o , c aso a o u tr a

Capítulo 2. Desenvolvimento dos jogos 195

v e r i f i c a ç ão tenha fa l ha d o

43 elif s e l f . mediaPlayer . s t a t e ( ) == QMediaPlayer . Stop pe dState :

44 #Caso e s t e j a d e s l i g a d o , d e f i n i m o s que a imagem do p lay f i c a v i s í v el ,

para f i c a r na f r e n t e do v í deo , apagado a imagem do bot ão play

45 s e l f . f in dC h i l d ( c l i c k l a b e l ) . setH idden ( Fa l se )

47 #Criando a fun ç ão que d e f i n e a p o si ç ão do v í deo

48 de f s e t _ p o s i t i o n ( s e l f , p o s i t i o n ) :

49 #D efin indo a p o s i ç ã o do v í deo

50 s e l f . mediaPlayer . s e t P o s i t i o n ( p o s i t i o n )

Código 39 –

Criando a classe especial escondido, Criando em seu inicializa-dor o tocador

de vídeo e deﬁnindo que não é visível, Criando a função de repintar, criando

as funções play_video, mediastate_changed e set_position

2.3.21 Criando as classes media_slider e video

Na subsecção anterior fora criado a classe escondido, nessa subsecção vamos criar

as classes video para onde o vídeo vai tocar e a classe media_slider, que vai ser a barra do

vídeo, e depois vamos linkar eles com o media player, pois o programa cria os componentes

pela sequência, portanto vai criar a widget escondido primeiro, e depois criar a clicklabel, o

botão fechar, o vídeo, e a barra, por esse motivo vamos criar seus links ao criar os seu ﬁlhos,

passando seu parente escondido, na função de inicialização, como feito anteriormente na

subsecção 2.2.8.7, começando com a criação do slider, que assim que for criado vamos criar

os links entre o mediaplayer de seu parente escondido com as funções position_changed e

duration_changed, e criar as funções que vão deﬁnir os valores recebidos para a barra de

andamento, ao mover a barra e mudar o local do vídeo fora criado ao fazer o link entre

sliderMoved() e set_position do widget escondido, e a outra classe a ser criada é o video

que ao invez de ser baseado numa QWidget se baseia no QVideoWidget, que simplesmente

vai deﬁnir que a classe video vai ser onde o video de seu parente escondido no mediaplayer

vai tocar, tornando a widget video no reprodutor do vídeo, e muda a função de click

do mouse como na clicklabel, para parar ou tocar o vídeo, sendo esses links criados na

subsecção 2.3.13.

1#Criando a nova c l a s s e m ed ia _s li de r baseado na QSli der , para mudar sua p o si

ç ão co nfor me o v í deo t o ca

2class media_slider(QSlider) :

3#Criando a fun ç ão de i n i c i a l i z a ção , que se executa cada vez que o

programa c r i a um novo s l i d e r u t i l i z a n d o a c l a s s e media_s lider , e

d e f i n i n d o que s eu paren te é um QWidget , n e ss e caso a c l a s s e e sco ndid o

4de f __init__ ( s e l f , parent=QWidget ) :

5#G ar antindo su a exe cu ç ã o

6super ( ) . __init__ ( p aren t )

Capítulo 2. Desenvolvimento dos jogos 196

7#Aqui s e l i n k a todas as v e z e s que mudar a p o s i ç ão do p l a y e r de v í deo

com a p o s i ç ão do s l i d e r , lin kand o o p ar en t e com a pr ó p r ia , p o i s ao c r i a r

o pare n t e escond ido , o s l i d e r a inda não e x is t e , ocasionando er ro c a s o

t ent e l i n k á l os , tendo ent ão que l i n k a r o p arente com o s l i d e r na c r i a ç ã

o do s l i d e r

8s e l f . parent ( ) . mediaPlayer . positi o nChanged . connect ( s e l f . position_chan g e d

)

9#Aqui s e l i n k a todas as v e z e s que mudar a dura ç ã o do p l a y e r de v í deo

com a dura ção do s l i d e r

10 s e l f . parent ( ) . mediaPlayer . durationChanged . connect ( s e l f . duration_changed

)

12 #Aqui criamos o r e c e p t o r positi on_chan ged par a mudar a p o s i ç ã o da bar ra ,

conforme o v í deo toca

13 @Slot ( )

14 de f p os it io n_ ch an ge d ( s e l f , p o s i t i o n ) :

15 #aqui d e f i n i m o s sua nova p o s i ç ão

16 s e l f . setV alue ( p o s i t i o n )

18 #Aqui criamos o r e c e p t o r d uration_changed pa ra mudar a dura ç ão co nforme o

v í deo toca

19 @Slot ( )

20 de f duration_changed ( s e l f , dura t ion ) :

21 #aqui d e f i n i m o s sua nova dur a ç ã o

22 s e l f . setRange ( 0 , d urat i on )

24 #Criando a nova c l a s s e v ideo baseado na QVideoWidget , para mudar rodar o

video

25 class vide o ( QVideoWidget ) :

26 #Criando a fun ç ão de i n i c i a l i z a ção , que se executa cada vez que o

programa c r i a um novo QVideoWidget u t i l i z a n d o a c l a s s e video , e

d e f i n i n d o que s eu paren te é um QWidget , n e ss e caso a c l a s s e e sco ndid o

27 de f __init__ ( s e l f , parent=QWidget ) :

28 #G ar antindo su a exe cu ç ã o

29 super ( ) . __init__ ( p aren t )

30 #Aqui d e f i n i m o s que o l o c a l onde o v í deo v a i t o c a r v a i s e r e s s a l a b e l ,

d e f i n i n d o em seu p arent e no med iapla ye r , tendo que s e r f e i t o na

i n i c i a l i z a ç ão da c l a s s e video , po i s ao paren t e es c ondid o s e r c riado , a

wid get v i d eo ainda não f o i cr i a d o , por i s s o tem que d e f i n i r e la durante

a c r i a ç ão da c l a s s e v ideo

31 s e l f . parent ( ) . mediaPlayer . setVideoOutput ( s e l f )

33 #Criand o o s i n a l que f o i c r i a d o no e d i t o r de s i n a i s no QT Desi gn er , é

i mp orta n te t e r o mesmo nome , n e s s e c a so c l i c k .

34 c l i c k = S i g n a l ( )

35 #Mudando a f un ç ã o padr ã o do c l i c k do mouse , par a f a z e r a l g o e x t r a .

36 de f mousePressEvent ( s e l f , e v ent ) :

Capítulo 2. Desenvolvimento dos jogos 197

37 #Adicionando que apó s c l i c a r com o mouse e l e emita o s i n a l c l i c k , que

f o i l i n k a d o com p la y_ vid eo ( ) no QT D e s igne r

38 s e l f . c l i c k . emit ( )

Código 40 –

Criando as classes media_slider e video, fazendo o link entre eles e o video

player encontrado na widget escondido

2.3.22 Criando o MainWindows e a inicialização do programa

Na subsecção anterior fora ﬁnalizado as classes especiais para a execução do vídeo,

nessa subsecção vamos criar sua janela principal e sua inicialização, como feito no jogo da

memória em 2.2.8.5.

1#Tendo c r i ad o tudo , vamos c r i a r a j a n e l a p r i n c i p a l , u t i l i z a n d o a i n t e r f a c e

c r i a d a no QT De sig ne r , como f e i t o pa ra o j o go da memó r i a

2class MainWindow(QMainWindow , Ui_MainWindow) :

3#Funç ão de i n i c i a l i z a ç ão

4de f __init__ ( s e l f ) :

5#G ar antindo su a exe cu ç ã o

6super(MainWindow , s e l f ) . __init__ ( )

7#Adicionando a i n t e r f a c e

8s e l f . setup Ui ( s e l f )

9#Mostrando a i n t e r f a c e

10 s e l f . show ( )

12 #Começ o da a p l i c a ç ão , d e f i n i n d o seu i n í c i o p r i n c i p a l

13 i f __name__ == ’__main__ ’ :

14 #Defi n e a c r i a ç ão do a p l i c a t i v o

15 app = QApplicat ion ( sys . argv )

16 #Adicionando a j a n e l a p r i n c i p a l para o a p l i c a t i v o

17 mainWin = MainWindow ( )

18 #Executando o a p l i c a t i v o

19 r e t = app . exec_ ( )

20 #Terminando o programa

21 sy s . e x i t ( )

Código 41 – Python

2.3.23 Visualização do jogo de álgebra linear funcionando

Na subsecção anterior ﬁnalizamos o código do aplicativo.py, nessa subsecção vamos

ver como vai ser antecipadamente apertando F5 no Geany, como fora utilizado para

a veriﬁcação no jogo da memoria, na subsecção 2.2.12, podendo veriﬁcar se está tudo

funcionando, podendo veriﬁcar o começo do jogo na ﬁgura 152, na ﬁgura 153 podemos

observar como ﬁcaria ao escrever o valor correto da abelha e mel e o valor da ﬂor errado,

Capítulo 2. Desenvolvimento dos jogos 198

na ﬁgura 154 pode se ver a mensagem ao acertar todos os valores, na ﬁgura 155 se encontra

a imagem da widget escondido esperando para começar a tocar o vídeo, na ﬁgura 156 se

tem o começo do vídeo após inicia-lo.

Figura 152 – Visualização do jogo ﬁnalizado

Figura 153 –

Visualização das respostas corretas em verde e desabilitadas, e a resposta

errada em vermelho

Capítulo 2. Desenvolvimento dos jogos 199

Figura 154 –

Visualização da mensagem após responder todos os três valores corretamente

Figura 155 –

Visualização da interface com o vídeo antes de clicar com o mousse para

começar a tocar

Capítulo 2. Desenvolvimento dos jogos 200

Figura 156 – Visualização do vídeo em andamento

2.3.24 Arrumando últimos detalhes para criação do executável

Na subsecção anterior fora veriﬁcado o jogo funcionando em sua totalidade, nessa

subsecção vamos arrumar os ultimos detalhes do código arrumando seus imports generali-

zados para apenas o necessário como foi feito para o jogo da memória, para isso vamos

remover os imports onde tem * e executar o programa, porém podemos já aproveitar os

importes do jogo da memória no código 25 removendo apenas QEventLoop e QTimer do

PySide2.QtCore e o QCursor do PySide2.QtGui, ﬁcando conforme o código 42, para veriﬁ-

car o que está faltando e comparar em qual biblioteca se encontra, sendo elas, encontradas,

em (QT,a;QT,b;QT,c;QT,d), após veriﬁcar e adicionar os import faltantes, como

feito na criação do jogo da memoria na subsecção 2.2.12, ao arrumar os importes, o código

de importes deve ﬁcar conforme o código 43, agora tendo o código completo deve ﬁcar

conforme o código 44.

1from PySide2 . QtGui import QPixmap , Qt , QPainter

2from PySide2 . QtWidgets import QMainWindow , QPushButton , QLabel , QWidget ,

QApplication , QStyleOption , QStyle , QMessageBox

3from PySide2 . QtCore import QRect , Signal , Slot , QCoreApplication ,

QMetaObject

5from PySide2 . QtMultimediaWidgets import QVideoWidget

Código 42 –

Cópia dos importes encontrados no jogo da memoria no código 25,

removendo os importes não necessários, sendo eles QEventLoop e QTimer do

Capítulo 2. Desenvolvimento dos jogos 201

PySide2.QtCore e o QCursor do PySide2.QtGui

1#Importando os o b j e t o s do PySide2 u t i l i z a d o s no programa

2from PySide2 . QtGui import QPixmap , Qt , QPainter , QRegExpValidator

3from PySide2 . QtWidgets import QMainWindow , QPushButton , QLabel , QWidget ,

QApplication , QStyleOption , QStyle , QMessageBox , QLineEdit , QS l i d er

4from PySide2 . QtCore import QRect , Signal , Slot , QCoreApplication ,

QMetaObject , QRegExp , QUrl

6#Importando os o b j e t o s do PySide2 u t i l i z a d o s para reprodu ç ão de v í deo

7from PySide2 . QtMultimediaWidgets import QVideoWidget

8from PySide2 . QtMultimedia import QMediaPlayer , QMediaContent

Código 43 – Alteração dos importes generalizados para apenas os necessários

1#−∗− coding : u t f −8−∗−

2#Imp ortando o s i s t e m a e o s i s t e m a o p e r a c i o n a l , a l i n h a de cima d e f i n e o

t i p o de c ó d i go a s e r usado no python , o hashtag (#) é u t i l i z a d o para

d e f i n i r coment á r i o s .

3import sys , os

4#Importando as imagens do qrc , que foram c o n v e r t i d a s para o a rqui vo

r e c u r s o s . py .

5import r e c u r s o s

7#Importando os o b j e t o s do PySide2 u t i l i z a d o s no programa

8from PySide2 . QtGui import QPixmap , Qt , QPainter , QRegExpValidator

9from PySide2 . QtWidgets import QMainWindow , QPushButton , QLabel , QWidget ,

QApplication , QStyleOption , QStyle , QMessageBox , QLineEdit , QS l i d er

10 from PySide2 . QtCore import QRect , Signal , Slot , QCoreApplication ,

QMetaObject , QRegExp , QUrl

12 #Importando os o b j e t o s do PySide2 u t i l i z a d o s para reprodu ç ão de v í deo

13 from PySide2 . QtMultimediaWidgets import QVideoWidget

14 from PySide2 . QtMultimedia import QMediaPlayer , QMediaContent

16 #Funç ã o para c o nv e r s ã o de caminho do s i s t e m a o p e r a c i o n a l , p ara su a u t i l i z a ç

ão durante a c r i a ç ão de e xecut á v e i s .

17 de f r e so urce _ pa t h ( r e l a t i v e _ p a t h ) :

18 " " " Get a bs ol ut e path to res our ce , works f o r dev and f o r P y I n s t a l l e r

" " "

19 #t r y comando pa ra t e n t a r e xe cu t ar a lg o

20 try :

21 # P y I n s t a l l e r c r e a t e s a temp f o l d e r and s t o r e s path i n _MEIPASS

22 # P y I n s t a l l e r c r i a um arq ui vo tempor á r i o para armazenar o caminho

dos i t e n s chamado _MEIPASS

23 base_path = s ys ._MEIPASS

24 #except comando para v e r i f i c a r se fr a c a ss o u ao t e n ta r e x ecu t ar no try ,

se gun do par â metro é o t i p o de e r r o r , n e s s e c a so Ex ce ptio n , s e der uma

Capítulo 2. Desenvolvimento dos jogos 202

e xc e ç ão , f a ç a

25 except Exception :

26 #Aqui s e usa o caminho padr ã o do s is te ma o p e r a c i o n a l

27 base_path = os . path . abspath ( ".")

29 #Aqui e st amos r e to r nando o caminho c o n v e r t i d o com r e tu r n , para c a so s e j a

normal , ou na c r i a ç ão do e xe cut á v e l

30 r e t u r n o s . path . j o i n ( base_path , r e l a t i v e _ p a t h )

32 #I n t e r f a c e c r i a d a no QT D es ign er , p r e s e n t e d en t ro do i n t e r f a c e . py

33 class Ui_MainWindow( object) :

34 de f s etupUi ( s e l f , MainWindow ) :

35 i f not MainWindow . objectName ( ) :

36 MainWindow . setObjectName ( u"MainWindow")

37 MainWindow . r e s i z e ( 9 51 , 684)

38 s e l f . c e n t r a l w i d g e t = w i d g e t _ p r i n c i p a l ( MainWindow )

39 s e l f . c e n t r a l w i d g e t . setObjectName ( u" centralwidget " )

40 s e l f . l abe l_ 2 = QLabel ( s e l f . c e n t r a l w i d g e t )

41 s e l f . l a b e l _ 2 . setObjectName (u" label_2 " )

42 s e l f . l a b e l _ 2 . setGeometry (QRect (120 , 190 , 71 , 81) )

43 s e l f . l a b e l _ 2 . setPixmap (QPixmap( u":/ imagens /abelha " ) )

44 s e l f . l a b el_2 . s e t S c a l e d C o n t e n t s ( True )

45 s e l f . l abel_25 = QLabel ( s e l f . c e n t r a l w i d g e t )

46 s e l f . label_25 . setObjectName ( u" label_25" )

47 s e l f . label_25 . setGeometry ( QRect ( 30 , 40 , 891 , 121) )

48 s e l f . l abe l_ 3 = QLabel ( s e l f . c e n t r a l w i d g e t )

49 s e l f . l a b e l _ 3 . setObjectName (u" label_3 " )

50 s e l f . l a b e l _ 3 . setGeometry (QRect (30 , 190 , 71 , 81) )

51 s e l f . l abe l_ 4 = QLabel ( s e l f . c e n t r a l w i d g e t )

52 s e l f . l a b e l _ 4 . setObjectName (u" label_4 " )

53 s e l f . l a b e l _ 4 . setGeometry (QRect (300 , 190 , 71 , 81) )

54 s e l f . l a b e l _ 4 . setPixmap (QPixmap( u":/ imagens /flor" ) )

55 s e l f . l a b el_4 . s e t S c a l e d C o n t e n t s ( True )

56 s e l f . l abe l_ 5 = QLabel ( s e l f . c e n t r a l w i d g e t )

57 s e l f . l a b e l _ 5 . setObjectName (u" label_5 " )

58 s e l f . l a b e l _ 5 . setGeometry (QRect (210 , 190 , 71 , 81) )

59 s e l f . l abe l_ 6 = QLabel ( s e l f . c e n t r a l w i d g e t )

60 s e l f . l a b e l _ 6 . setObjectName (u" label_6 " )

61 s e l f . l a b e l _ 6 . setGeometry (QRect (480 , 190 , 71 , 81) )

62 s e l f . l a b e l _ 6 . setPixmap (QPixmap( u":/ imagens /mel" ) )

63 s e l f . l a b el_6 . s e t S c a l e d C o n t e n t s ( True )

64 s e l f . l abe l_ 7 = QLabel ( s e l f . c e n t r a l w i d g e t )

65 s e l f . l a b e l _ 7 . setObjectName (u" label_7 " )

66 s e l f . l a b e l _ 7 . setGeometry (QRect (390 , 190 , 71 , 81) )

67 s e l f . l abe l_ 8 = QLabel ( s e l f . c e n t r a l w i d g e t )

68 s e l f . l a b e l _ 8 . setObjectName (u" label_8 " )

69 s e l f . l a b e l _ 8 . setGeometry (QRect (660 , 190 , 71 , 81) )

Capítulo 2. Desenvolvimento dos jogos 203

70 s e l f . l abe l_ 9 = QLabel ( s e l f . c e n t r a l w i d g e t )

71 s e l f . l a b e l _ 9 . setObjectName (u" label_9 " )

72 s e l f . l a b e l _ 9 . setGeometry (QRect (570 , 190 , 71 , 81) )

73 s e l f . l abel_10 = QLabel ( s e l f . c e n t r a l w i d g e t )

74 s e l f . label_10 . setObjectName ( u" label_10" )

75 s e l f . label_10 . setGeometry ( QRect ( 7 50 , 1 90 , 71 , 81) )

76 s e l f . l abel_11 = QLabel ( s e l f . c e n t r a l w i d g e t )

77 s e l f . label_11 . setObjectName ( u" label_11" )

78 s e l f . label_11 . setGeometry ( QRect ( 8 40 , 1 90 , 71 , 81) )

79 s e l f . l abel_12 = QLabel ( s e l f . c e n t r a l w i d g e t )

80 s e l f . label_12 . setObjectName ( u" label_12" )

81 s e l f . label_12 . setGeometry ( QRect ( 6 60 , 2 90 , 71 , 81) )

82 s e l f . l abel_13 = QLabel ( s e l f . c e n t r a l w i d g e t )

83 s e l f . label_13 . setObjectName ( u" label_13" )

84 s e l f . label_13 . setGeometry ( QRect ( 2 10 , 2 90 , 71 , 81) )

85 s e l f . label_13 . setPixmap (QPixmap( u":/ imagens/flor" ) )

86 s e l f . l a b el _ 1 3 . s e t S c a l e d C o n t e n t s ( True )

87 s e l f . l abel_14 = QLabel ( s e l f . c e n t r a l w i d g e t )

88 s e l f . label_14 . setObjectName ( u" label_14" )

89 s e l f . label_14 . setGeometry ( QRect ( 4 80 , 2 90 , 71 , 81) )

90 s e l f . label_14 . setPixmap (QPixmap( u":/ imagens/abelha " ) )

91 s e l f . l a b el _ 1 4 . s e t S c a l e d C o n t e n t s ( True )

92 s e l f . l abel_15 = QLabel ( s e l f . c e n t r a l w i d g e t )

93 s e l f . label_15 . setObjectName ( u" label_15" )

94 s e l f . label_15 . setGeometry ( QRect ( 1 20 , 2 90 , 71 , 81) )

95 s e l f . l abel_16 = QLabel ( s e l f . c e n t r a l w i d g e t )

96 s e l f . label_16 . setObjectName ( u" label_16" )

97 s e l f . label_16 . setGeometry ( QRect ( 5 70 , 2 90 , 71 , 81) )

98 s e l f . l abel_17 = QLabel ( s e l f . c e n t r a l w i d g e t )

99 s e l f . label_17 . setObjectName ( u" label_17" )

100 s e l f . label_17 . setGeometry ( QRect ( 3 00 , 2 90 , 71 , 81) )

101 s e l f . l abel_18 = QLabel ( s e l f . c e n t r a l w i d g e t )

102 s e l f . label_18 . setObjectName ( u" label_18" )

103 s e l f . label_18 . setGeometry ( QRect ( 3 90 , 2 90 , 71 , 81) )

104 s e l f . l abel_19 = QLabel ( s e l f . c e n t r a l w i d g e t )

105 s e l f . label_19 . setObjectName ( u" label_19" )

106 s e l f . label_19 . setGeometry ( QRect ( 7 50 , 2 90 , 71 , 81) )

107 s e l f . label_19 . setPixmap (QPixmap( u":/ imagens/abelha " ) )

108 s e l f . l a b el _ 1 9 . s e t S c a l e d C o n t e n t s ( True )

109 s e l f . l abel_20 = QLabel ( s e l f . c e n t r a l w i d g e t )

110 s e l f . label_20 . setObjectName ( u" label_20" )

111 s e l f . label_20 . setGeometry ( QRect ( 7 50 , 3 90 , 71 , 81) )

112 s e l f . l abel_21 = QLabel ( s e l f . c e n t r a l w i d g e t )

113 s e l f . label_21 . setObjectName ( u" label_21" )

114 s e l f . label_21 . setGeometry ( QRect ( 1 20 , 3 90 , 71 , 81) )

115 s e l f . label_21 . setPixmap (QPixmap( u":/ imagens/mel " ) )

116 s e l f . l a b el _ 2 1 . s e t S c a l e d C o n t e n t s ( True )

Capítulo 2. Desenvolvimento dos jogos 204

117 s e l f . l abel_22 = QLabel ( s e l f . c e n t r a l w i d g e t )

118 s e l f . label_22 . setObjectName ( u" label_22" )

119 s e l f . label_22 . setGeometry ( QRect ( 3 00 , 3 90 , 71 , 81) )

120 s e l f . label_22 . setPixmap (QPixmap( u":/ imagens/flor" ) )

121 s e l f . l a b el _ 2 2 . s e t S c a l e d C o n t e n t s ( True )

122 s e l f . l abel_23 = QLabel ( s e l f . c e n t r a l w i d g e t )

123 s e l f . label_23 . setObjectName ( u" label_23" )

124 s e l f . label_23 . setGeometry ( QRect ( 5 70 , 3 90 , 71 , 81) )

125 s e l f . l abel_24 = QLabel ( s e l f . c e n t r a l w i d g e t )

126 s e l f . label_24 . setObjectName ( u" label_24" )

127 s e l f . label_24 . setGeometry ( QRect ( 2 10 , 3 90 , 71 , 81) )

128 s e l f . l abel_26 = QLabel ( s e l f . c e n t r a l w i d g e t )

129 s e l f . label_26 . setObjectName ( u" label_26" )

130 s e l f . label_26 . setGeometry ( QRect ( 6 60 , 3 90 , 71 , 81) )

131 s e l f . label_26 . setPixmap (QPixmap( u":/ imagens/abelha " ) )

132 s e l f . l a b el _ 2 6 . s e t S c a l e d C o n t e n t s ( True )

133 s e l f . l abel_27 = QLabel ( s e l f . c e n t r a l w i d g e t )

134 s e l f . label_27 . setObjectName ( u" label_27" )

135 s e l f . label_27 . setGeometry ( QRect ( 3 90 , 3 90 , 71 , 81) )

136 s e l f . l abel_28 = QLabel ( s e l f . c e n t r a l w i d g e t )

137 s e l f . label_28 . setObjectName ( u" label_28" )

138 s e l f . label_28 . setGeometry ( QRect ( 4 80 , 3 90 , 71 , 81) )

139 s e l f . label_28 . setPixmap (QPixmap( u":/ imagens/flor" ) )

140 s e l f . l a b el _ 2 8 . s e t S c a l e d C o n t e n t s ( True )

141 s e l f . l abel_29 = QLabel ( s e l f . c e n t r a l w i d g e t )

142 s e l f . label_29 . setObjectName ( u" label_29" )

143 s e l f . label_29 . setGeometry ( QRect ( 8 40 , 3 90 , 71 , 81) )

144 s e l f . label_29 . setPixmap (QPixmap( u":/ imagens/abelha " ) )

145 s e l f . l a b el _ 2 9 . s e t S c a l e d C o n t e n t s ( True )

146 s e l f . l abel_30 = QLabel ( s e l f . c e n t r a l w i d g e t )

147 s e l f . label_30 . setObjectName ( u" label_30" )

148 s e l f . label_30 . setGeometry ( QRect ( 30 , 390 , 71 , 81) )

149 s e l f . l abel_31 = QLabel ( s e l f . c e n t r a l w i d g e t )

150 s e l f . label_31 . setObjectName ( u" label_31" )

151 s e l f . label_31 . setGeometry ( QRect ( 30 , 490 , 71 , 81) )

152 s e l f . label_31 . setPixmap (QPixmap( u":/ imagens/abelha " ) )

153 s e l f . l a b el _ 3 1 . s e t S c a l e d C o n t e n t s ( True )

154 s e l f . l abel_32 = QLabel ( s e l f . c e n t r a l w i d g e t )

155 s e l f . label_32 . setObjectName ( u" label_32" )

156 s e l f . label_32 . setGeometry ( QRect ( 1 20 , 4 90 , 71 , 81) )

157 s e l f . l abel_34 = QLabel ( s e l f . c e n t r a l w i d g e t )

158 s e l f . label_34 . setObjectName ( u" label_34" )

159 s e l f . label_34 . setGeometry ( QRect ( 6 60 , 4 90 , 71 , 81) )

160 s e l f . label_34 . setPixmap (QPixmap( u":/ imagens/mel " ) )

161 s e l f . l a b el _ 3 4 . s e t S c a l e d C o n t e n t s ( True )

162 s e l f . l abel_35 = QLabel ( s e l f . c e n t r a l w i d g e t )

163 s e l f . label_35 . setObjectName ( u" label_35" )

Capítulo 2. Desenvolvimento dos jogos 205

164 s e l f . label_35 . setGeometry ( QRect ( 7 50 , 4 90 , 71 , 81) )

165 s e l f . l abel_37 = QLabel ( s e l f . c e n t r a l w i d g e t )

166 s e l f . label_37 . setObjectName ( u" label_37" )

167 s e l f . label_37 . setGeometry ( QRect ( 3 40 , 4 90 , 71 , 81) )

168 s e l f . label_37 . setPixmap (QPixmap( u":/ imagens/flor" ) )

169 s e l f . l a b el _ 3 7 . s e t S c a l e d C o n t e n t s ( True )

170 s e l f . l abel_38 = QLabel ( s e l f . c e n t r a l w i d g e t )

171 s e l f . label_38 . setObjectName ( u" label_38" )

172 s e l f . label_38 . setGeometry ( QRect ( 4 30 , 4 90 , 71 , 81) )

173 s e l f . v alor_abe lha = v a l o r e s ( s e l f . c e n t r a l w i d g e t )

174 s e l f . valor_abelha . setObjectName ( u"valor_abelha")

175 s e l f . valor_abelha . setGeometry ( QRect (21 0 , 490 , 71 , 81) )

176 s e l f . v alor_ abelha . s e t S t y l e S h e e t ( u"font: 87 40pt \" A r i a l \";")

177 s e l f . v a l o r _ f l o r = v a l o r e s ( s e l f . c e n t r a l w i d g e t )

178 s e l f . v a l o r _ f l o r . setObjectName ( u"valor_flor")

179 s e l f . v a l o r _ f l o r . setGeometry ( QRect ( 52 0 , 490 , 7 1 , 8 1) )

180 s e l f . v a l o r _ f l o r . s e t S t y l e S h e e t ( u"font : 87 40pt \" A r i a l \";")

181 s e l f . va lor _m el = v a l o r e s ( s e l f . c e n t r a l w i d g e t )

182 s e l f . valor_mel . setObjectName ( u" valor_mel " )

183 s e l f . valor_mel . setGeometry ( QRect ( 8 40 , 4 90 , 71 , 81) )

184 s e l f . valor_mel . s e t S t y l e S h e e t ( u"font : 87 40pt \" A r i a l \";")

185 s e l f . pushButton = QPushButton ( s e l f . c e n t r a l w i d g e t )

186 s e l f . pushButton . setObjectName ( u"pushButton")

187 s e l f . pushButton . setGeometry ( QRect ( 3 40 , 5 90 , 251 , 71) )

188 s e l f . pushButton . s e t S t y l e S h e e t ( u"font : 87 40pt \" A r i a l \";")

189 s e l f . w id ge t_ es co nd id a = e sco ndido ( s e l f . c e n t r a l w i d g e t )

190 s e l f . widget_escondida . setObjectName ( u"widget_escondida" )

191 s e l f . widget_escondida . setGeometry ( QRect (1 0 , 10 , 9 31 , 6 61) )

192 s e l f . widge t_esco nd ida . s e t S t y l e S h e e t ( u"background -color: rgb (170 ,

170 , 170) ;" )

193 s e l f . pushButton_2 = QPushButton ( s e l f . widget_es condida )

194 s e l f . pushButton_2 . setObjectName ( u"pushButton_2")

195 s e l f . pushButton_2 . setGeometry ( QRect (35 0 , 570 , 251 , 71) )

196 s e l f . pushButton_2 . s e t S t y l e S h e e t ( u" background - color: rgb (240, 240 ,

240);font : 87 40pt \" A r i a l \";")

197 s e l f . h o r i z o n t a l S l i d e r = medi a _ s lider ( s e l f . widget_escondida )

198 s e l f . h o r i z o n t a l S l i d e r . setObjectName ( u" horizontalSlider " )

199 s e l f . h o r i z o n t a l S l i d e r . setGeometry ( QRect ( 40 , 5 30 , 851 , 31) )

200 s e l f . h o r i z o n t a l S l i d e r . s e t O r ie n t a t i o n ( Qt . H or izo nt a l )

201 s e l f . l a b e l = c l i c k l a b e l ( s e l f . widget_escondi da )

202 s e l f . l a b e l . setObjectName ( u"label" )

203 s e l f . l a b e l . setGeometry ( QRect ( 330 , 160 , 271 , 191) )

204 s e l f . l a b e l . s e t S t y l e S h e e t ( u" background -color : rgb(0, 0, 0);" )

205 s e l f . l a b e l . setPixmap ( QPixmap( u":/imagens /play " ) )

206 s e l f . l a b e l . s e t S c a l e d C o n t e n t s ( True )

207 s e l f . widget = v ideo ( s e l f . widget_escondi da )

208 s e l f . widget . setObjectName ( u" widget " )

Capítulo 2. Desenvolvimento dos jogos 206

209 s e l f . widget . setGeometry ( QRect ( 0 , 0 , 931 , 521) )

210 s e l f . widge t . s e t S t y l e S h e e t ( u" background -color : rgb(0, 0, 0);" )

211 s e l f . widget . r a i se_ ( )

212 s e l f . pushButton_2 . ra i se_ ( )

213 s e l f . h o r i z o n t a l S l i d e r . ra i se_ ( )

214 s e l f . l a b e l . ra i se_ ( )

215 MainWindow . s et Ce nt ralWidget ( s e l f . c e n t r a l w i d g e t )

216 s e l f . valor_mel . r ais e _ ( )

217 s e l f . v a l o r _ f l o r . r ais e_ ( )

218 s e l f . valor_abelha . ra i se_ ( )

219 s e l f . l a b e l _ 2 . ra i se_ ( )

220 s e l f . label_25 . r ais e _ ( )

221 s e l f . l a b e l _ 3 . ra i se_ ( )

222 s e l f . l a b e l _ 4 . ra i se_ ( )

223 s e l f . l a b e l _ 5 . ra i se_ ( )

224 s e l f . l a b e l _ 6 . ra i se_ ( )

225 s e l f . l a b e l _ 7 . ra i se_ ( )

226 s e l f . l a b e l _ 8 . ra i se_ ( )

227 s e l f . l a b e l _ 9 . ra i se_ ( )

228 s e l f . label_10 . r ais e _ ( )

229 s e l f . label_11 . r ais e _ ( )

230 s e l f . label_12 . r ais e _ ( )

231 s e l f . label_13 . r ais e _ ( )

232 s e l f . label_14 . r ais e _ ( )

233 s e l f . label_15 . r ais e _ ( )

234 s e l f . label_16 . r ais e _ ( )

235 s e l f . label_17 . r ais e _ ( )

236 s e l f . label_18 . r ais e _ ( )

237 s e l f . label_19 . r ais e _ ( )

238 s e l f . label_20 . r ais e _ ( )

239 s e l f . label_21 . r ais e _ ( )

240 s e l f . label_22 . r ais e _ ( )

241 s e l f . label_23 . r ais e _ ( )

242 s e l f . label_24 . r ais e _ ( )

243 s e l f . label_26 . r ais e _ ( )

244 s e l f . label_27 . r ais e _ ( )

245 s e l f . label_28 . r ais e _ ( )

246 s e l f . label_29 . r ais e _ ( )

247 s e l f . label_30 . r ais e _ ( )

248 s e l f . label_31 . r ais e _ ( )

249 s e l f . label_32 . r ais e _ ( )

250 s e l f . label_34 . r ais e _ ( )

251 s e l f . label_35 . r ais e _ ( )

252 s e l f . label_37 . r ais e _ ( )

253 s e l f . label_38 . r ais e _ ( )

254 s e l f . pushButton . ra i se_ ( )

255 s e l f . widget_escondida . ra i se_ ( )

Capítulo 2. Desenvolvimento dos jogos 207

256

257 s e l f . r e t r a n s l a t e U i (MainWindow )

258 s e l f . pushButton . c l i c k e d . c onnect ( s e l f . c e n t r a l w i d g e t . v e r i f i c a r )

259 s e l f . l a b e l . c l i c k . connect ( s e l f . widget_es condida . play_video )

260 s e l f . widget . c l i c k . connect ( s e l f . widget_es condida . play_video )

261 s e l f . h o r i z o n t a l S l i d e r . s l i derMoved . connect ( s e l f . widget_escondi da .

set_position)

262 s e l f . pushButton_2 . c l i c k e d . c o nnect ( MainWindow . c l o s e )

263

264 QMetaObject . connectSlotsByName ( MainWindow)

265 # setupUi

266

267 de f r e t r a n s l a t e U i ( s e l f , MainWindow ) :

268 MainWindow . setWindowTitle ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,

u"MainWindow" , None ) )

269 s e l f . l a b e l _ 2 . s e t T e x t ( "" )

270 s e l f . l ab e l _ 2 5 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >

Desafio :

Descubra o valor da abelha , da flor e do mel <p align =\"

center \"> para de scobrir como \ u00e9

feito o mel </body ></html >" , None ) )

271 s e l f . l ab el _3 . setText ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >2 </body > </ html >" , None ) )

272 s e l f . l a b e l _ 4 . s e t T e x t ( "" )

273 s e l f . l ab el _5 . setText ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >+ </body > </ html >" , None ) )

274 s e l f . l a b e l _ 6 . s e t T e x t ( "" )

275 s e l f . l ab el _7 . setText ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >-</body ></html >" , None ) )

276 s e l f . l ab el _8 . setText ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >-</body ></html >" , None ) )

277 s e l f . l ab el _9 . setText ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >= </body > </ html >" , None ) )

278 s e l f . l ab e l _ 1 0 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >1 </body > </ html >" , None ) )

279 s e l f . l ab e l _ 1 1 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >2 </body > </ html >" , None ) )

280 s e l f . l ab e l _ 1 2 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

Capítulo 2. Desenvolvimento dos jogos 208

font -weight :600;\" >-</body ></html >" , None ) )

281 s e l f . l a b e l _ 1 3 . s e t T e x t ( "" )

282 s e l f . l a b e l _ 1 4 . s e t T e x t ( "" )

283 s e l f . l ab e l _ 1 5 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >2 </body > </ html >" , None ) )

284 s e l f . l ab e l _ 1 6 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >= </body > </ html >" , None ) )

285 s e l f . l ab e l _ 1 7 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >-</body ></html >" , None ) )

286 s e l f . l ab e l _ 1 8 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >7 </body > </ html >" , None ) )

287 s e l f . l a b e l _ 1 9 . s e t T e x t ( "" )

288 s e l f . l ab e l _ 2 0 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >-</body ></html >" , None ) )

289 s e l f . l a b e l _ 2 1 . s e t T e x t ( "" )

290 s e l f . l a b e l _ 2 2 . s e t T e x t ( "" )

291 s e l f . l ab e l _ 2 3 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >= </body > </ html >" , None ) )

292 s e l f . l ab e l _ 2 4 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >-</body ></html >" , None ) )

293 s e l f . l a b e l _ 2 6 . s e t T e x t ( "" )

294 s e l f . l ab e l _ 2 7 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >* </body > </ html >" , None ) )

295 s e l f . l a b e l _ 2 8 . s e t T e x t ( "" )

296 s e l f . l a b e l _ 2 9 . s e t T e x t ( "" )

297 s e l f . l ab e l _ 3 0 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >3 </body > </ html >" , None ) )

298 s e l f . l a b e l _ 3 1 . s e t T e x t ( "" )

299 s e l f . l ab e l _ 3 2 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >= </body > </ html >" , None ) )

300 s e l f . l a b e l _ 3 4 . s e t T e x t ( "" )

301 s e l f . l ab e l _ 3 5 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

font -weight :600;\" >= </body > </ html >" , None ) )

302 s e l f . l a b e l _ 3 7 . s e t T e x t ( "" )

303 s e l f . l ab e l _ 3 8 . s e t T e x t ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"<

html ><head /><body >< span style =\" font - size :48 pt;

Capítulo 2. Desenvolvimento dos jogos 209

font -weight :600;\" >= </body > </ html >" , None ) )

304 s e l f . pushButton . s et Te xt ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,u"

Verificar" , None ) )

305 s e l f . pushButton_2 . setText ( QCoreApplication . t r a n s l a t e ( "MainWindow" ,

u"Fechar" , None ) )

306 s e l f . l a b e l . s e t T e x t ( "" )

307 # r e t r a n s l a t e U i

308

309 #Criando a nova c l a s s e v a l o r e s baseado no QLineEdit , para d e f i n i r um

v a l i d a d o r de t ext o , p ermitindo ap enas e s c r e v e r números de 1 a 99 no

i nput de t e x t o

310 class v a l o r e s ( QLineEdit ) :

311 #Criando a fun ç ão de i n i c i a l i z a ção , que se executa cada vez que o

programa c r i a uma nova QLineEdit u t i l i z a n d o a c l a s s e v a l o r e s

312 de f __init__ ( s e l f , parent=None ) :

313 #G ar antindo su a exe cu ç ã o

314 super ( ) . __init__ ( p aren t )

315 #Def i nindo q ua l é seu v alida dor , u t i l i z a n d o o QRegExpValidator , com o

p r o p r i o o b j e t o e QRegExp pas sa ndo q u a i s s ã o o s p o ss í v e i s c a r a c t e r e s p or

c asa r e p r e s e n t a d o po r [ ] , n e s s e c a so s ó v a l i d a d e duas c a s a s por i s s o

apena s d o i s [ ] , sen do a p r i m e i r a c a s o a c e i t a n d o e n t r e 1 e 9 , o s i n a l de

menos s e r e p r e s e n t a e n t r e o s v a l o r e s , e su a s egu nda c a sa a c e i t a n d o e n t r e

0 e 9

316 s e l f . s e t V a l i d a t o r ( QRegExpValidator ( QRegExp( "[1-9][0 -9] " ) , s e l f ) )

317 #Def i nindo que os t e x t o s vão e s t a r c e n t r a l i z a d o s ao e s c re v e r

318 s e l f . setAlign m ent ( Qt . AlignCent e r )

319

320

321 #Criando a nova c l a s s e c l i c k l a b e l baseado na QLabel , para a di c i o na r a fun ç ã

o de c l i c k

322 class c l i c k l a b e l ( QLabel ) :

323 #Criand o o s i n a l que f o i c r i a d o no e d i t o r de s i n a i s no QT Desi gn er , é

i mp orta n te t e r o mesmo nome , n e s s e c a so c l i c k .

324 c l i c k = S i g n a l ( )

325 #Mudando a f un ç ã o padr ã o do c l i c k do mouse , par a f a z e r a l g o e x t r a .

326 de f mousePressEvent ( s e l f , e v ent ) :

327 #Adicionando que apó s c l i c a r com o mouse e l e emita o s i n a l c l i c k .

328 s e l f . c l i c k . emit ( )

329

330 #Criand o a nova c l a s s e w i d g e t _ p r i n c i p a l ba se ado na QWidget , onde s e f a z a

v e r i f i c a ç ão se os v a l o r e s e st ão ce rt o s , e caso e s t e j a mostre um mensagem

, e cada v a l o r c o r r e t o f i q u e com bord a v erde , e o s e r r a d o s com bo rda

ve rmelha e f oque n e l e .

331 class widget_principal(QWidget) :

332 #Criando a fun ç ão de i n i c i a l i z a ção , que se executa cada vez que o

programa c r i a um novo w i dg et u t i l i z a n d o a c l a s s e w i d g e t _ p r i n c i p a l

333 de f __init__ ( s e l f , parent=None ) :

Capítulo 2. Desenvolvimento dos jogos 210

334 #G ar antindo su a exe cu ç ã o

335 super ( ) . __init__ ( p aren t )

336 #Criando as v a r i á v e i s de v e r i f i c a ç ão s e o v a l o r e s e st ão c o r r e t o s ou não

, por padr ão va i c r i a r como f a l s o , para abelha , f l o r e mel

337 s e l f . abelha = Fa l se

338 s e l f . f l o r = Fa l se

339 s e l f . mel = Fa l se

340

341 #Cr ia ç ão dos s l o t s , os r e c e p t o r e s do s i n a l c l i c k ed , para i s s o sempre a

fun ç ão tem que t e r o nome do s l o t , d e f i n i d o no QT D esigner , e s e r

d e f i n i d o @ sl ot ( ) a ntes da fun ç ão

342 @Slot ( )

343 de f v e r i f i c a r ( s e l f ) :

344 #Aqui nó s pegamos o QLineEdit e armazenamos na v a r i á vel , para i s s o

vamos u sar o f i n d c h i l d , passando o t i p o QLineEdit e o nome d ele , por

i s s o que é i mpo rtan te t e r mudado s eu nome no QT D es ig ner , p o i s no w id ge t

p o s s u i 3 d i f e r e n t e s , que é ne ce s s á r i o e s p e c i f i c á l o s

345 #Criando as v a r i á v e i s possuindo o nome do QLineEdit , para f i c a r mais f á

c i l sua i d e n t i f i c a ç ão enquanto se t r a b al h a com e l a s

346 v al or_abelha = s e l f . f i n d C h i l d ( QLineEdit , "valor_abelha")

347 v a l o r _ f l o r = s e l f . f i n d C h i l d ( QLineEdit , "valor_flor")

348 va lor_mel = s e l f . f i n d C h i l d ( QLineEdit , " valor_mel" )

349

350 #Aqui v e r i f i c a m o s s e o t e xt o do valor_ab elha c ond iz com o número da

abelha , 3 , para i s s o usamos a fun ç ão d i spla y Text ( ) do QLineEdit e

comparamos com o v a l o r 3 em forma de t e x t o " 3 "

351 i f ( valor_a belha . d i spla yTex t ( ) == "3") :

352 #Se o v a l o r f o r 3 , d e f i n i m o s que o v a l o r da a b elha e s t á c o r r e t o ,

passando para a v a r i a v e l a be lh a o va l or True

353 s e l f . abelha = True

354 #Aqui d ef in i mo s o e s t i l o da QLineEdit chamada valor_abelha , mantendo

o t i p o de f onte , e a d ici on a n do uma borda s ó l i d a verde , de 1 p i x e l , com

border : 1px s o l i d green ;

355 valor_abelh a . s e t S t y l e S h e e t ( u"font: 87 40pt \" A r i a l \";border: 1px

solid green;" )

356 #Aqui d e f i n i m o s que a QL in eEdit chamada val o r_ ab elh a , nã o e s t á ma is

h a b i l it a d a para e s c r i t a , travando e l a

357 valor_abelh a . s e tEnabled ( F a ls e )

358 #Aqui v e r i f i c a m o s s e todas as o u tra s v e r i f i c a ç õ e s falharam , resumindo o

v a l o r não e r á 3

359 e l s e :

360 #Se o v a l or e ra d i f e r e n t e de 3 , f o ca na QLineEdit chamada

valor_abelha

361 valor_abelh a . set Fo cus ( )

362 #Aqui d ef in i mo s o e s t i l o da QLineEdit chamada valor_abelha , mantendo

o t i p o de f onte , e a d ici on a n do uma borda s ó l i d a vermelha , de 1 p i x e l ,

com b o r der : 1px s o l i d red ;

Capítulo 2. Desenvolvimento dos jogos 211

363 valor_abelh a . s e t S t y l e S h e e t ( u"font: 87 40pt \" A r i a l \";border: 1px

solid red;" )

364

365 #Aqui r e petim o s a v e r i f i c a ç ão que f o i f e i t a para a abelha , mudando para

f l o r , e s e o v a l o r é 9 .

366 #Aqui v e r i f i c a m o s s e o t e xt o do v a l o r _ f l o r c on diz com o número da f l o r ,

9 , para i s s o usamos a fun ç ão d i s playT e x t ( ) do QLineEdit e comparamos

com o v a l o r 9 em f orm a de t e x t o " 9 "

367 i f ( v a l o r _ f l o r . d i spla yTex t ( ) == "9") :

368 #Se o v a l o r f o r 9 , d e f i n i m o s que o v a l o r da f l o r e s t á c o r r e t o ,

passando para a v a r i a v e l f l o r o v al or True

369 s e l f . f l o r = True

370 #Aqui d e f i n i m o s o e s t i l o da QLineEdit chamada v a l o r _ f l o r , mantendo o

t i p o de f onte , e a d icio nando uma borda s ó l i d a v erde , de 1 p i x e l , com

border : 1px s o l i d green ;

371 v a l o r _ f l o r . s e t S t y l e S h e e t ( u"font : 87 40pt \" A r i a l \";border: 1px solid

green;" )

372 #Aqui d e f i n i m o s que a QLineEdit chamada v a l o r _ f l o r , nã o e s t á mais

h a b i l it a d a para e s c r i t a , travando e l a

373 v a l o r _ f l o r . setEnabled ( Fa lse )

374 #Aqui v e r i f i c a m o s s e todas as o u tra s v e r i f i c a ç õ e s falharam , resumindo o

v a l o r não e r á 9

375 e l s e :

376 #Se o v a l or e ra d i f e r e n t e de 9 , f o ca na QLineEdit chamada v al o r_ f lo r

377 v a l o r _ f l o r . s etFocus ( )

378 #Aqui d e f i n i m o s o e s t i l o da QLineEdit chamada v a l o r _ f l o r , mantendo o

t i p o de f onte , e a d icio nando uma borda s ó l i d a ver melha , de 1 p i x e l , com

border : 1px s o l i d re d ;

379 v a l o r _ f l o r . s e t S t y l e S h e e t ( u"font : 87 40pt \" A r i a l \";border: 1px solid

red;" )

380

381 #Aqui r e petim o s a v e r i f i c a ç ão que f o i f e i t a para a abelha , mudando para

mel , e s e o v a l o r é 2 7 .

382 #Aqui v e r i f i c a m o s s e o t e xt o do valor_mel c on diz com o número da mel ,

27 , para i s s o usamos a fun ç ão d i spla y Text ( ) do QLineEdit e comparamos

com o v a l o r 27 em forma de t e x t o " 2 7 "

383 i f ( valor_mel . d isp layT ext ( ) == "27" ) :

384 #Se o v a l o r f o r 27 , d e f i n i m o s que o v a l o r da mel e s t á c o r r e t o ,

passando para a v a r i a v e l mel o v a lo r True

385 s e l f . mel = True

386 #Aqui d ef in i mo s o e s t i l o da QLineEdit chamada valor_mel , mantendo o

t i p o de f onte , e a d icio nando uma borda s ó l i d a v erde , de 1 p i x e l , com

border : 1px s o l i d green ;

387 valor_mel . s e t S t y l e S h e e t ( u"font : 87 40pt \" A r i a l \";border: 1px solid

green;" )

388 #Aqui d e f i n i m o s que a QL in eEdit chamada va lo r_mel , nã o e s t á mai s

h a b i l it a d a para e s c r i t a , travando e l a

Capítulo 2. Desenvolvimento dos jogos 212

389 valor_mel . setEnabled ( Fal s e )

390 #Aqui v e r i f i c a m o s s e todas as o u tra s v e r i f i c a ç õ e s falharam , resumindo o

v a l o r não e r á 27

391 e l s e :

392 #Se o v a l or e ra d i f e r e n t e de 27 , f oc a na QLineEdit chamada valor_mel

393 valor_mel . s etFoc us ( )

394 #Aqui d ef in i mo s o e s t i l o da QLineEdit chamada valor_mel , mantendo o

t i p o de f onte , e a d icio nando uma borda s ó l i d a ver melha , de 1 p i x e l , com

border : 1px s o l i d re d ;

395 valor_mel . s e t S t y l e S h e e t ( u"font : 87 40pt \" A r i a l \";border: 1px solid

red;" )

396

397 #Aqui v e r i f i c a m o s s e todos os v a l o r e s e s t ão c e rt os , v e r i f i c a n d o as v a r i

á v e i s a belh a , f l o r e mel s ã o v e r d a d e i r a s .

398 i f ( s e l f . a b e lha and s e l f . f l o r and s e l f . mel ) :

399 #Caso s e j a vamos c r i a r um popup de mensagem

400 msgBox = QMessageBox ( )

401 #Aqui d e f i n i m o s o t í t u l o do popup de mensagem

402 msgBox . setWi ndowTitle ( u"Parab éns" )

403 #Aqui d e f i n i m o s q ua l a mensagem do popup de mensagem Parab é n s os

v a l o r e s e st ão c e r t o s . Continue agor a com o v í deo : Produzindo mel , mais

pa ra f i c a r com i nden ta ç ão , l e t r a gran de e nt r e o ut ra s c o i s a s , s e u t i l i z a

o QT D esigner para d e f i n i r seu e s t i l o , c r ian d o uma l ab e l , e apertando

change r i c h te xt , e s cr eve ndo e dei xando como desejado , d e p o i s s ó c o p i a r

o campo t ex t , no e d i t o r de pr op ried ades , onde t er á s um c ó digo enorme ,

come ç ando com <html>

404 msgBox . s etText ( u’<html ><head /><body ><span style ="

font -size :20 pt;"> Parab éns os valores estão certos < span style ="

font -size :20 pt; font -weight :600;" >! <span style =" font -size :20 pt

;"> Continue agora com o vídeo < span style =" font -size :20 pt; font

-weight :600;" >: <span style =" font -size :28 pt

; font -weight :600;" >Produzindo mel </body ></html >’ )

405 #Aqui d e f i n i m o s q ua l o bo t ão do popup de mensagem , n e s s e c a so um bo t ã

o OK

406 msgBox . s e tSt a ndardBu t tons ( QMessageBox . Ok)

407 #Aqui d e f i n i m o s q ua l o bo t ão do popup de mensagem é o pad r ão , p ara

c as o a p e r t e ESC, Ent er , Spa ce no t e c l a d o , a c i o n e o bot ã o

408 msgBox . s e t De f au lt B ut to n ( QMessageBox . Ok)

409 #Aqui v e r i f i c a m o s s e a mensagem f o i executada , no c aso acionad o algum

bot ão

410 r e t = msgBox . exec_ ( )

411 #Aqui v e r i f i c a m o s s e o bot ão a cion ado f o i Ok

412 i f r e t == QMessageBox . Ok :

413 #Caso tenha s i d o s e l e c i o n a d o Ok, s e p roc ura o f i l h o QWidget da

c l a s s e es condida , como e l e tem mais de um f i l h o QWidget , é i mportant e

t e r nomeado o wid get p ara w id ge t_ es co nd id a , ap ó s a cha r d e f i n i m o s que e l e

não é mais ocu l t a , aparecendo na t e l a

Capítulo 2. Desenvolvimento dos jogos 213

414 s e l f . f i n d C h i l d ( QWidget , u" widget_escondida " ) . setHidden ( F a lse )

415

416 #Criando a nova c l a s s e escond i d o baseado no QWidget , para torn á−l o i n v i s í

v e l e a d i c i o n a r o p l a y e r de v í deo .

417 class e sco ndid o ( QWidget ) :

418 #Criando a fun ç ão de i n i c i a l i z a ção , que se executa cada vez que o

programa c r i a um novo widget u t i l i z a n d o a c l a s s e e scondi d o

419 de f __init__ ( s e l f , parent=None ) :

420 #G ar antindo su a exe cu ç ã o

421 super ( ) . __init__ ( p aren t )

422 #Aqui e stamos d e f i n i n d o que a w id ge t e sco ndido é para e s t a r es con dida ,

para i s s o usamos a fun ç ão setHidden passando o par âmetro True , para que

quando f o r c r i a d o a t e l a e s t e j a e sco ndi da

423 s e l f . setHidden ( True )

424 #Aqui c ri a mo s um p l a y e r de v í deo , usando o QMediaPlayer , como um

componente da c l a s s e e s c ondido

425 s e l f . mediaPlayer = QMediaPlayer ( None , QMediaPlayer . V i d e oSurface )

426 #Aqui criamos uma v a r i a v e l para armazenar o caminho do video , usando a

fun ç ã o r es o ur ce_p a th ( ) que cria m os no come ç o do arq uiv o , para p eg ar o

caminho r e l a t i v o , que f u n c i o n e p ara c r i a ç ão de e x ec ut á v e i s ou como c ó

digo normal

427 l o c a l _ v i d e o = reso urce_ path ( u" video/mel.avi" )

428 #Aqui d e f i ni mo s q ual v a i s e r o v í deo , usando QMediaContent , e d e f i n i n d o

que é l o c a l com QUrl . f r o m L o c a l F i l e e p as sand o como p ar â metro o caminho

armazenado na v a r i a v e l l oc al_ vid eo , c r i a d a a n te ri orm en te

429 s e l f . m ed ia Pl ay er . s et Med ia ( QMediaContent ( QUrl . f r o m L o c a l F i l e ( l o c a l _ v i d e o )

) )

430 #Aqui c ri a mo s um l i n k p ar a o p l a y e r de v í deo , para c a so o e s t a do mude

um s i n a l chamado stateChanged , a c i on e que o e stado mudou , um r e c e p t o r

me di ast at e_c ha nge d , c r i a d o na pr ó p r i a c l a s s e

431 s e l f . mediaPlayer . stateChanged . c o n n ect ( s e l f . mediastate_changed )

432

433 #Essa fun ç ão mo d if i ca o e f e i t o de pintu r a , p o i s widgets promovidas não

ace ita m pl ano de fundo , por i s s o p r e c i s a −s e mudar s ua fun ç ã o n ati v a , não

p re ci sa ndo mexer , tendo em vá r i o s l u g a r e s seu c ó d ig o pron to .

434 de f p aintE vent ( s e l f , pe ) :

435 o = QStyleOption ()

436 o . init From ( s e l f )

437 p = QPainter ( s e l f )

438 s e l f . s t y l e ( ) . drawPrimitive ( QStyle . PE_Widget , o , p , s e l f )

439

440 #Criando fun ção play_video , para d e f i n i r se o v í deo e s t á tocando ou

parado , mudando seu comportamento

441 de f play_video ( s e l f ) :

442 #V e r i f i c a se o es t ado do vid e o e st á tocando

443 i f s e l f . mediaPlayer . s t a t e ( ) == QMediaPlayer . P lay ing Sta te :

444 #Caso o v í deo e s t e j a tocando , mudamos seu e stado para parado usando a

Capítulo 2. Desenvolvimento dos jogos 214

fun ç ã o p ause ( )

445 s e l f . mediaPlayer . pause ( )

446 #Aqui v e r i f i c a m o s s e todas as o u tra s v e r i f i c a ç õ e s falharam , resumindo

s e o e sta do do v ideo não e s t á tocando

447 e l s e :

448 #Caso o v í deo não e s t e j a tocando , mudamos seu est a d o para tocando

usando a fu n ç ã o p lay ( )

449 s e l f . mediaPlayer . play ( )

450

451 #Criando a fun ção para v e r i f i c a ç ão s e e st á tocando o v í deo , ou e st á

desativado

452 de f mediastate_changed ( self , state ) :

453 #Aqui s e v e r i f i c a s e o esta d o do vid e o e s t á tocando

454 i f s e l f . mediaPlayer . s t a t e ( ) == QMediaPlayer . P lay ing Sta te :

455 #Caso e s t e j a t oc an do , d e f i n i m o s que a imagem do p lay f i c a

tr ansp a rent e , para não f i c a r na f r e n t e do v í deo

456 s e l f . f in dC h i l d ( c l i c k l a b e l ) . setH idden ( True )

457 #Aqui s e v e r i f i c a s e o e s t a do do v i d e o e s t á d e s l i g a d o , c aso a o u tr a

v e r i f i c a ç ão tenha fa l ha d o

458 elif s e l f . mediaPlayer . s t a t e ( ) == QMediaPlayer . Stop pe dState :

459 #Caso e s t e j a d e s l i g a d o , d e f i n i m o s que a imagem do p lay f i c a v i s í v el ,

para f i c a r na f r e n t e do v í deo , apagado a imagem do bot ão play

460 s e l f . f in dC h i l d ( c l i c k l a b e l ) . setH idden ( Fa l se )

461

462 #Criando a fun ç ão que d e f i n e a p o si ç ão do v í deo

463 de f s e t _ p o s i t i o n ( s e l f , p o s i t i o n ) :

464 #D efin indo a p o s i ç ã o do v í deo

465 s e l f . mediaPlayer . s e t P o s i t i o n ( p o s i t i o n )

466

467 #Criando a nova c l a s s e m ed ia _s li de r baseado na QSli der , para mudar sua p o si

ç ão co nfor me o v í deo t o ca

468 class media_slider(QSlider) :

469 #Criando a fun ç ão de i n i c i a l i z a ção , que se executa cada vez que o

programa c r i a um novo s l i d e r u t i l i z a n d o a c l a s s e media_s lider , e

d e f i n i n d o que s eu paren te é um QWidget , n e ss e caso a c l a s s e e sco ndid o

470 de f __init__ ( s e l f , parent=QWidget ) :

471 #G ar antindo su a exe cu ç ã o

472 super ( ) . __init__ ( p aren t )

473 #Aqui s e l i n k a todas as v e z e s que mudar a p o s i ç ão do p l a y e r de v í deo

com a p o s i ç ão do s l i d e r , lin kand o o p ar en t e com a pr ó p r ia , p o i s ao c r i a r

o pare n t e escond ido , o s l i d e r a inda não e x is t e , ocasionando er ro c a s o

t ent e l i n k á l os , tendo ent ão que l i n k a r o p arente com o s l i d e r na c r i a ç ã

o do s l i d e r

474 s e l f . parent ( ) . mediaPlayer . positi o nChanged . connect ( s e l f . position_chan g e d

)

475 #Aqui s e l i n k a todas as v e z e s que mudar a dura ç ã o do p l a y e r de v í deo

com a dura ção do s l i d e r

Capítulo 2. Desenvolvimento dos jogos 215

476 s e l f . parent ( ) . mediaPlayer . durationChanged . connect ( s e l f . duration_changed

)

477

478 #Aqui criamos o r e c e p t o r positi on_chan ged par a mudar a p o s i ç ã o da bar ra ,

conforme o v í deo toca

479 @Slot ( )

480 de f p os it io n_ ch an ge d ( s e l f , p o s i t i o n ) :

481 #aqui d e f i n i m o s sua nova p o s i ç ão

482 s e l f . setV alue ( p o s i t i o n )

483

484 #Aqui criamos o r e c e p t o r d uration_changed pa ra mudar a dura ç ão co nforme o

v í deo toca

485 @Slot ( )

486 de f duration_changed ( s e l f , dura t ion ) :

487 #aqui d e f i n i m o s sua nova dur a ç ã o

488 s e l f . setRange ( 0 , d urat i on )

489

490 #Criando a nova c l a s s e v ideo baseado na QVideoWidget , para mudar rodar o

video

491 class vide o ( QVideoWidget ) :

492 #Criando a fun ç ão de i n i c i a l i z a ção , que se executa cada vez que o

programa c r i a um novo QVideoWidget u t i l i z a n d o a c l a s s e video , e

d e f i n i n d o que s eu paren te é um QWidget , n e ss e caso a c l a s s e e sco ndid o

493 de f __init__ ( s e l f , parent=QWidget ) :

494 #G ar antindo su a exe cu ç ã o

495 super ( ) . __init__ ( p aren t )

496 #Aqui d e f i n i m o s que o l o c a l onde o v í deo v a i t o c a r v a i s e r e s s a l a b e l ,

d e f i n i n d o em seu p arent e no med iapla ye r , tendo que s e r f e i t o na

i n i c i a l i z a ç ão da c l a s s e video , po i s ao paren t e es c ondid o s e r c riado , a

wid get v i d eo ainda não f o i cr i a d o , por i s s o tem que d e f i n i r e la durante

a c r i a ç ão da c l a s s e v ideo

497 s e l f . parent ( ) . mediaPlayer . setVideoOutput ( s e l f )

498

499 #Criand o o s i n a l que f o i c r i a d o no e d i t o r de s i n a i s no QT Desi gn er , é

i mp orta n te t e r o mesmo nome , n e s s e c a so c l i c k .

500 c l i c k = S i g n a l ( )

501 #Mudando a f un ç ã o padr ã o do c l i c k do mouse , par a f a z e r a l g o e x t r a .

502 de f mousePressEvent ( s e l f , e v ent ) :

503 #Adicionando que apó s c l i c a r com o mouse e l e emita o s i n a l c l i c k , que

f o i l i n k a d o com p la y_ vid eo ( ) no QT D e s igne r

504 s e l f . c l i c k . emit ( )

505

506 #Tendo c r i ad o tudo , vamos c r i a r a j a n e l a p r i n c i p a l , u t i l i z a n d o a i n t e r f a c e

c r i a d a no QT De sig ne r , como f e i t o pa ra o j o go da memó r i a

507 class MainWindow(QMainWindow , Ui_MainWindow) :

508 #Funç ão de i n i c i a l i z a ç ão

509 de f __init__ ( s e l f ) :

Capítulo 2. Desenvolvimento dos jogos 216

510 #G ar antindo su a exe cu ç ã o

511 super(MainWindow , s e l f ) . __init__ ( )

512 #Adicionando a i n t e r f a c e

513 s e l f . setup Ui ( s e l f )

514 #Mostrando a i n t e r f a c e

515 s e l f . show ( )

516

517 #Começ o da a p l i c a ç ão , d e f i n i n d o seu i n í c i o p r i n c i p a l

518 i f __name__ == ’__main__ ’ :

519 #Defi n e a c r i a ç ão do a p l i c a t i v o

520 app = QApplicat ion ( sys . argv )

521 #Adicionando a j a n e l a p r i n c i p a l para o a p l i c a t i v o

522 mainWin = MainWindow ( )

523 #Executando o a p l i c a t i v o

524 r e t = app . exec_ ( )

525 #Terminando o programa

526 sy s . e x i t ( )

Código 44 – Código completo do jogo de álgebra linear

2.3.25 Criação do executável individual

Na subsecção anterior fora ﬁnalizado o código, arrumando seus importes, nessa

subsecção vamos criar seu executavel individual, sendo importante que o vídeo esteja no

formato .avi, pois é o padrão aceito do Python, para outros formatos podem ocasionar

erros, como pode ser visto no site (CLAY,2020), agora vamos abrir o terminal para

conventer o aplicativo.py para um executável único usando o pyinstaller, primeiramente

como sempre, abrindo o terminal e indo até a pasta onde se encontra a aplicação, no

caso do windows, nesse projeto onde foi colocado na pasta Documentos na pasta xyz,

usamos cd Documents/xyz para chegar em seu diretório, e executamos o comando 45,

sendo como visto anteriormente às opções na criação do jogo da memória, porém com a

adição do vídeo, que se encontra na pasta video, dentro do xyz, usando a opção –add-

data="video

mel.avi;video"para deﬁnir que vai ter data adicional, passando seu caminho,

video

mel.avi, depois usamos o ‘ ; ‘ para ﬁnalizar e adicionar um apelido, o apelido é

importante ter o mesmo nome da pasta onde o vídeo se encontra, para não ter alterações

em seu caminho na aplicação, que usamos a função resource_path para criar, assim

funcionando para a criação do executável. Tendo feito isso no windows vai ter um .exe que

funciona, até em outras máquinas sem python.

1pyinstaller −−hidden−import PySide2 . QtXml −−noconfirm −−onefile −−add−data=

"video /mel .avi;video " −−name="algebra_do_mel" aplicativo .py

Código 45 –

Comando utilizado para converter o arquivo aplicativo.py em um executável

individual

Capítulo 2. Desenvolvimento dos jogos 217

2.4 Conclusão do capitulo 2.

Nesse capitulo foi criado os exemplos de jogos educacionais, sendo eles um jogo

de memoria para química com informativos gerais e o outro um jogo de álgebra para

matemática e biologia, sendo presente sua construção desde a instalação e conﬁguração

do Python e seus componentes, a criação da interface gráﬁca no Qt Design, a criação do

código em Python usando o PySide2 e por ﬁm a criação do executável, tendo terminado o

projeto nesse capitulo, seu intuito é servir de base para aqueles que quiserem criar jogos,

durante sua criação foi interessante pois nunca tinha usado o PySide2 antes e nenhum tipo

de ferramenta de modelagem, tendo que aprender desde o zero para criar os jogos, podendo

veriﬁcar sua facilidade em criação e o suporte encontrado, sempre que encontrava alguma

duvida de como fazer alguma coisa, tinha vários sites com a resposta, podendo escolher

qual melhor se encaixava na aplicação, para outros que forem começar a desenvolver não

encontraram problemas em seu desenvolvimento, sendo por causa desse projeto que ensina

a criar jogos e pode ser usado como base para criação, ou pelo o apoio e material disponível

do PySide2 e Qt Design na Internet, contanto que se dedique acredito que todos possam

fazer seus próprios jogos educacionais, o primeiro passo foi dado com esse projeto, só falta

a sua dedicação e vontade de melhorar o aprendizado dos estudantes.

218

3 Conclusão

Quando fora iniciado o projeto se tinha a intenção de apenas melhorar a opinião

sobre jogos digitais e em especial jogos para educação e abrir uma proposta para os

professores criarem jogos educacionais, fazendo uma analise de qual linguagem, interface

e modelador de interface seria o melhor para os professores que não tem experiência

com programação, mostrando os pontos e motivos pela seleção. No entanto, ao longo

do desenvolvimento, fora percebido que mesmo veriﬁcando qual seria a linguagem mais

fácil de se usar, não seria o suﬁciente para cumprir o propósito de abrir portas para que

professores criassem seus próprios jogos educacionais.

Foi preciso aprofundar a pesquisa de como facilitar mais o aprendizado e construção

dos jogos, sendo compreendido que seria um tutorial de como criar jogos educacionais,

mudando seu foco após ter veriﬁcado qual a linguagem a ser utilizada, para a criação de

um tutorial completo de criação de jogos educacionais, para servir de base para o futuro

desenvolvimento de outros tipos de jogos educacionais.

Os jogos escolhidos não foram escolhidos de forma aleatória ou sem critérios, para

escolher quais jogos utilizar fora baseado nas matérias que meus colegas e amigos do

ensino médio tiveram diﬁculdade, sendo elas matemática, química e física, selecionando

um jogo para aprendizado de química juntamente de informativos gerais e outro jogo para

matemática com biologia, a matéria de física fora mostrado vários exemplos de jogos, e

escolhido não criar um exemplo para não ﬁcar muito longo o projeto, sendo um exemplo o

suﬁciente para se basear, e com a criação de dois jogos como exemplo não havia necessidade

de criar um terceiro jogo.

219

Referências

123 APPS. Video Converter online. Disponível em:

https://convert-video-online.com/

Acesso em: 15 de mar. 2021.

AHMEDWAS. Adding a data ﬁle in Pyinstaller using the oneﬁle option. 2018.

Stack Overﬂow. Disponível em: <https://stackoverﬂow.com/questions/51060894/

adding-a-data-ﬁle-in-pyinstaller-using-the-oneﬁle-option>. Acesso em: 15 de mar. 2021.

ALPHANUMERIC. PyQT LineEdit Border Color. 2014. Stack Overﬂow. Disponível em:

<https://stackoverﬂow.com/questions/21193729/pyqt-lineedit-border-color>. Acesso em:

15 de mar. 2021.

ARVOREAGUA. Você Sabia? 2020. Instagram. Disponível em: <https://www.instagram.

com/p/CIY-ADzniEw/?igshid=12dbu9vbkv5ch>. Acesso em: 15 de mar. 2021.

BLACKFENIX06. time.sleep() and BackGround Windows PyQt5. 2017. Stack

Overﬂow. Disponível em: <https://stackoverﬂow.com/questions/48039309/

time-sleep-and-background-windows-pyqt5>. Acesso em: 15 de mar. 2021.

BOY innocent. Make Qlabel clickable or double clickable in Qt. 2017. Stack

Overﬂow. Disponível em: <https://stackoverﬂow.com/questions/44946009/

make-qlabel-clickable-or-double-clickable-in-qt>. Acesso em: 15 de mar. 2021.

CLAY. [Solved][PyQt5] DirectShowPlayerService::doRender: Unresolved error code

0x8040266 (IDisspatch error #102). 2020. Clay-Technology World. Disponível em: <https:

//clay-atlas.com/us/blog/2020/10/14/pyqt5-en-qmediaplayer-directshowplayerservice/

>. Acesso em: 15 de mar. 2021.

Clip Art Max. H20 Ar - H2o Icono Png. Clip Art Max. Disponível em: <https:

//www.clipartmax.com/middle/m2i8m2d3G6K9m2m2_h20-ar-h2o-icono-png/>. Acesso

em: 15 de mar. 2021.

CUNHA, F. Make QLabel clickable. 2017. Stack Overﬂow. Disponível em:

<https://stackoverﬂow.com/questions/45575626/make-qlabel-clickable>. Acesso em: 15

de mar. 2021.

DAWKINS, P. Section 7-2 : Linear Systems With Three Variables. Paul’s Online Notes.

Disponível em: <https://tutorial.math.lamar.edu/classes/alg/systemsthreevrble.aspx>.

Acesso em: 15 de mar. 2021.

DENLORD. How to play video in a QVideoWidget promoted in Qt Designer? 2018.

Stack Overﬂow. Disponível em: <https://stackoverﬂow.com/questions/49423350/

how-to-play-video-in-a-qvideowidget-promoted-in-qt-designer>. Acesso em: 15 de mar.

2021.

Detetives do Cosmos. Você Sabia? 2021. Facebook. Disponível em: <https://www.

facebook.com/Detetives-do-Cosmos-110102813986748/photos/230538785276483>. Acesso

em: 15 de mar. 2021.

Referências 220

DIABETES, N. N. de Estudos em Obesidade e. Você Sabia? 2020. Facebook. Disponível

em: <https://www.facebook.com/neodiauﬂa/photos/2498106250501789>. Acesso em: 15

de mar. 2021.

EAMONN. Moving QSlider to Mouse Click Position. 2018. Stack Over-

ﬂow. Disponível em: <https://stackoverﬂow.com/questions/52689047/

moving-qslider-to-mouse-click-position>. Acesso em: 15 de mar. 2021.

FBENCE. pyqt5 videowidget not showing in layout. 2017. Stack Over-

ﬂow. Disponível em: <https://stackoverﬂow.com/questions/41612790/

pyqt5-videowidget-not-showing-in-layout>. Acesso em: 15 de mar. 2021.

FITZPATRICK, M. Packaging PyQt5 & PySide2 applications for Windows, with

PyInstaller. Learn PyQt. Disponível em: <https://www.learnpyqt.com/tutorials/

packaging-pyqt5-pyside2-applications-windows-pyinstaller/>. Acesso em: 15 de mar.

2021.

FITZPATRICK, M. The QResource System. Learn PyQt. Disponível em: <https:

//www.learnpyqt.com/tutorials/qresource-system/>. Acesso em: 15 de mar. 2021.

FOROGH, P. Python How to Create Media Player in PyQt5. Code Loop. Disponível em:

<https://codeloop.org/python-how-to-create-media-player-in-pyqt5/>. Acesso em: 15 de

mar. 2021.

FREEPIK. Mineral water. Flat Icon. Disponível em: <https://www.ﬂaticon.com/

free-icon/mineral-water_1651824?related_id=1651824&origin=search>. Acesso em: 15

de mar. 2021.

FROSI, F. O. Jogos Digitais no Contexto Escolar: desaﬁos e possibilidades

para a Prática Docente. Tese (Doutorado) — Centro de Ciências Exatas e

Tecnológicas, Universidade do Vale do Rio dos Sinos (UNISINOS) – São

Leopoldo, RS – Brasil, IX SBGames - Florianópolis - SC, 2010. Disponível em:

<http://www.sbgames.org/papers/sbgames10/culture/full/full13.pdf>. Acesso em: 15 de

mar. 2021.

GEANY. Geany Download. 2005. Geany. Disponível em: <https://www.geany.org/

download/releases/>. Acesso em: 15 de mar. 2021.

Geoﬀrey Kater; Agro Bayer Brasil. Mel: como ele é feito. 2018. You Tube. Disponível em:

<https://www.youtube.com/watch?v=PqFX-YD_BME>. Acesso em: 15 de mar. 2021.

GOD-THESUPREME. Science Icon. 2019. Deaviant Art. Disponível em: <https:

//www.deviantart.com/god-thesupreme/art/Science-Icon-811074506>. Acesso em: 15 de

mar. 2021.

GRAFIKAZPAZUREM. Ícone de Fe2O3, óxido de ferro (III) ou óxido férrico

ícone - Ilustração em Alta Resolução. 2018. I Stock Photo. Disponível em: <https:

//www.istockphoto.com/br/vetor/%C3%ADcone-de-fe2o3-%C3%B3xido-de-ferro-ou-%

C3%B3xido-f%C3%A9rrico-%C3%ADcone-gm900654096-248486500>. Acesso em: 15 de

mar. 2021.

Referências 221

HARIS. Clickable Qlabel How to use inside Designer. 2015. Stack Over-

ﬂow. Disponível em: <https://stackoverﬂow.com/questions/31041358/

clickable-qlabel-how-to-use-inside-designer/31042404>. Acesso em: 15 de mar.

2021.

HELTONBIKER. How do I compile a PyQt script (.py) to a single

standalone executable ﬁle for windows (.exe) and/or linux? 2011. Stack

Overﬂow. Disponível em: <https://stackoverﬂow.com/questions/5888870/

how-do-i-compile-a-pyqt-script-py-to-a-single-standalone-executable-ﬁle-for>.

Acesso em: 15 de mar. 2021.

HONEY, M. A.; HILTON, M. Learning Science Through Computer Games and

Simulations. Tese (Doutorado) — The National Academies of Sciences, Engineering,

and Medicine, Washington, DC: The National Academies Press, 2011. Disponível em:

<https://www.nap.edu/catalog.php?record_id=13078>. Acesso em: 15 de set. 2020.

INOSíVEL. How to center text in a QLineEdit? [duplicate]. 2019. Stack

Overﬂow. Disponível em: <https://stackoverﬂow.com/questions/55880028/

how-to-center-text-in-a-qlineedit>. Acesso em: 15 de mar. 2021.

JOHN. facebook play button png clip art - white video play butto PNG image with

transparent background. 2019. Top Png. Disponível em: <https://toppng.com/

facebook-play-button-png-clip-art-white-video-play-butto-PNG-free-PNG-Images_

162527>. Acesso em: 15 de mar. 2021.

JUHELE. Salt shaker PNG icon(#65045). 2018. Icons Png. Disponível em:

<https://www.iconspng.com/image/65045/salt-shaker>. Acesso em: 15 de mar. 2021.

K., M. Using a custom PySide2 widget in Qt Designer. 2018. Stack

Overﬂow. Disponível em: <https://stackoverﬂow.com/questions/52128188/

using-a-custom-pyside2-widget-in-qt-designer>. Acesso em: 15 de mar. 2021.

KOAN. Qt Stylesheet for QMessageBox. 2011. Stack Overﬂow. Disponível em:

<https://stackoverﬂow.com/questions/5104257/qt-stylesheet-for-qmessagebox>. Acesso

em: 15 de mar. 2021.

MSFRIESE. Creating pyinstaller from my script, missing PySide2.QtXml in the result.

2018. Stack Overﬂow. Disponível em: <https://stackoverﬂow.com/questions/50580039/

creating-pyinstaller-from-my-script-missing-pyside2-qtxml-in-the-result>. Acesso em: 15

de mar. 2021.

NASA. What Causes Air Pollution? Climate Kids. Disponível em: <https:

//climatekids.nasa.gov/air-pollution/>. Acesso em: 15 de mar. 2021.

NAUTILIUS. Pyinstaller and –oneﬁle: How to include an image in the exe ﬁle. 2015.

Stack Overﬂow. Disponível em: <https://stackoverﬂow.com/questions/31836104/

pyinstaller-and-oneﬁle-how-to-include-an-image-in-the-exe-ﬁle>. Acesso em: 15 de mar.

2021.

NIKHILAGGARWAL3. __init__ in Python. 2019. Geeks for Geeks. Disponível em:

<https://www.geeksforgeeks.org/__init__-in-python/>. Acesso em: 15 de mar. 2021.

Referências 222

Nova Vida Filtros. Você Sabia? Nova Vida Filtros. Disponível em: <http:

//novavidaﬁltros.comunidades.net/voce-sabia>. Acesso em: 15 de mar. 2021.

ORENSBRULI. Custom QWidget setStyleSheet not working - Python.

2019. Qt Forum. Disponível em: <https://forum.qt.io/topic/100691/

custom-qwidget-setstylesheet-not-working-python/5>. Acesso em: 15 de mar.

2021.

OXINOXI. Ilustração co2 do modelo do átomo do dióxido de carbono - Ilustração em

Alta Resolução. 2019. I Stock Photo. Disponível em: <https://www.istockphoto.com/

br/vetor/ilustra%C3%A7%C3%A3o-co2-do-modelo-do-%C3%A1tomo-do-di%C3%

B3xido-de-carbono-gm1184910947-333732359>. Acesso em: 15 de mar. 2021.

PARK, H. How to add a QVideoWidget in Qt Designer? 2017. Stack

Overﬂow. Disponível em: <https://stackoverﬂow.com/questions/47259825/

how-to-add-a-qvideowidget-in-qt-designer>. Acesso em: 15 de mar. 2021.

PETRROUDNY. Modelo vetorial de substância química. Ícone da molécula de cloreto

de sódio comumente conhecida como NaCl salgada consistindo de sódio e cloreto.

Fórmula estrutural com ligação dupla isolada em branco - Ilustração em Alta Resolução.

2020. I Stock Photo. Disponível em: <https://www.istockphoto.com/br/vetor/

modelo-vetorial-de-subst%C3%A2ncia-qu%C3%ADmica-%C3%ADcone-da-mol%C3%

A9cula-de-cloreto-de-s%C3%B3dio-gm1285103180-382039129>. Acesso em: 15 de mar.

2021.

Py Installer. PyInstaller. 2005. Py Installer. Disponível em: <http://www.pyinstaller.org/>.

Acesso em: 15 de mar. 2021.

PYPI. PyQt5Designer 5.14.1. Pypi. Disponível em: <https://pypi.org/project/

PyQt5Designer/>. Acesso em: 15 de mar. 2021.

PYPI. PySide2 5.15.2. Pypi. Disponível em: <https://pypi.org/project/PySide2/>.

Acesso em: 15 de mar. 2021.

PYTHON. Making non-clickable widgets clickable. Python Wiki. Disponível em: <https:

//wiki.python.org/moin/PyQt/Making%20non-clickable%20widgets%20clickable>.

Acesso em: 15 de mar. 2021.

PYTHON. random — Generate pseudo-random numbers. Python. Disponível em:

<https://docs.python.org/3/library/random.html>. Acesso em: 15 de mar. 2021.

QT. PySide2.QtCore. Qt. Disponível em: <https://doc.qt.io/qtforpython-5/PySide2/

QtCore/index.html>. Acesso em: 15 de mar. 2021.

QT. PySide2.QtGui. Qt. Disponível em: <https://doc-snapshots.qt.io/qtforpython-5.15/

PySide2/QtGui/index.html>. Acesso em: 15 de mar. 2021.

QT. PySide2.QtMultimedia. Qt. Disponível em: <https://doc.qt.io/archives/qtforpython-5.

12/PySide2/QtMultimedia/index.html>. Acesso em: 15 de mar. 2021.

QT. PySide2.QtWidgets. Qt. Disponível em: <https://doc.qt.io/qtforpython-5/PySide2/

QtWidgets/index.html>. Acesso em: 15 de mar. 2021.

Referências 223

QT. QCursor. Qt. Disponível em: <https://doc.qt.io/archives/qtforpython-5.12/PySide2/

QtGui/QCursor.html>. Acesso em: 15 de mar. 2021.

QT. QLabel. Qt. Disponível em: <https://doc.qt.io/archives/qtforpython-5.12/PySide2/

QtWidgets/QLabel.html#PySide2.QtWidgets.PySide2.QtWidgets.QLabel>. Acesso em:

15 de mar. 2021.

QT. QMediaPlayer Class. Qt. Disponível em: <https://doc.qt.io/qt-5/qmediaplayer.html>.

Acesso em: 15 de mar. 2021.

QT. QMessageBox Class. Qt. Disponível em: <https://doc.qt.io/qt-5/qmessagebox.html>.

Acesso em: 15 de mar. 2021.

QT. QObject Class. Qt. Disponível em: <https://doc.qt.io/qt-5/qobject.html>. Acesso

em: 15 de mar. 2021.

QT. QPixmap. Qt. Disponível em: <https://doc-snapshots.qt.io/qtforpython-5.15/

PySide2/QtGui/QPixmap.html>. Acesso em: 15 de mar. 2021.

QT. QRegExp Class. Qt. Disponível em: <https://doc.qt.io/qt-5/qregexp.html>. Acesso

em: 15 de mar. 2021.

QT. QRegExpValidator Class. Qt. Disponível em: <https://doc.qt.io/qt-5/

qregexpvalidator.html>. Acesso em: 15 de mar. 2021.

QT. QSignalBlocker Class. Qt. Disponível em: <https://doc.qt.io/qt-5/qsignalblocker.

html>. Acesso em: 15 de mar. 2021.

QT. Qt Designer’s Signals and Slots Editing Mode. Qt. Disponível em: <https:

//doc.qt.io/archives/qt-4.8/designer-connection-mode.html>. Acesso em: 15 de mar. 2021.

QT. Qt for Python & PyInstaller. Qt. Disponível em: <https://doc.qt.io/qtforpython/

deployment-pyinstaller.html>. Acesso em: 15 de mar. 2021.

QT. Slot. Qt. Disponível em: <https://doc.qt.io/archives/qtforpython-5.12/extras/

PySide.QtCore.Slot.html>. Acesso em: 15 de mar. 2021.

QT. The Style Sheet Syntax. Qt. Disponível em: <https://doc.qt.io/qt-5/stylesheet-syntax.

html>. Acesso em: 15 de mar. 2021.

QT. teste. QLineEdit Class. Disponível em: <https://doc.qt.io/qt-5/qlineedit.html>.

Acesso em: 15 de mar. 2021.

ROSSUM, G. van. Python Download. 1991. Python. Disponível em: <https:

//www.python.org/downloads/>. Acesso em: 15 de mar. 2021.

SIGNALPROCESSED. PyQt5: Creation of Windows with Classes [duplicate]. 2018.

Stack Overﬂow. Disponível em: <https://stackoverﬂow.com/questions/52377073/

pyqt5-creation-of-windows-with-classes>. Acesso em: 15 de mar. 2021.

SPANNBAUER, A. Intro to Multiple Inheritance super. 2019. Data

Camp. Disponível em: <https://www.datacamp.com/community/tutorials/

super-multiple-inheritance-diamond-problem?utm_source=adwords_ppc&utm_

campaignid=1455363063&utm_adgroupid=65083631748&utm_device=c&utm_

Referências 224

keyword=&utm_matchtype=b&utm_network=g&utm_adpostion=&utm_creative=

278443377095&utm_targetid=dsa-429603003980&utm_loc_interest_ms=&utm_loc_

physical_ms=1001710>. Acesso em: 15 de mar. 2021.

STOCKIO. Honey jar dipper icon. Stockio. Disponível em: <https://www.stockio.com/

free-icon/isabella-honey-jar-dipper>. Acesso em: 15 de mar. 2021.

T., O. Which QLabel was pressed by mousePressEvent. 2018. Stack Over-

ﬂow. Disponível em: <https://stackoverﬂow.com/questions/50955182/

which-qlabel-was-pressed-by-mousepressevent>. Acesso em: 15 de mar. 2021.

USER7797. Why do stylesheets not work when subclassing QWidget and using Q_OBJECT?

2013. Stack Overﬂow. Disponível em: <https://stackoverﬂow.com/questions/18344135/

why-do-stylesheets-not-work-when-subclassing-qwidget-and-using-q-object/32889486#

32889486>. Acesso em: 15 de mar. 2021.

U/TLAZOLTEOTL. When is it necessary for a derived class to call the __init__ function

of its parent class? 2014. Reddit. Disponível em: <https://www.reddit.com/r/learnpython/

comments/2j1lx1/when_is_it_necessary_for_a_derived_class_to_call/>. Acesso em:

15 de mar. 2021.

VECTEEZY. Bee icon. Stockio. Disponível em: <https://www.stockio.com/free-icon/

nature-icons-bee>. Acesso em: 15 de mar. 2021.

VECTEEZY. Sunﬂower icon. Stockio. Disponível em: <https://www.stockio.com/

free-icon/nature-icons-sunﬂower>. Acesso em: 15 de mar. 2021.

VERSAFLOW. Python GUI Project Tutorial Part 04: Make a Subclass for Your UI

MainWindow. 2020. You Tube. Disponível em: <https://www.youtube.com/watch?v=

anXUc2d8xYI>. Acesso em: 15 de mar. 2021.

VISENTINI, V. A rusty iron support bar - Image ID: CTA14P. 2012. Alamy. Disponível

em: <https://www.alamy.com/stock-photo-a-rusty-iron-support-bar-49392918.html>.

Acesso em: 15 de mar. 2021.

W3 Schools. Python Lists. W3 Schools. Disponível em: <https://www.w3schools.com/

python/python_lists.asp>. Acesso em: 15 de mar. 2021.

ZAHI.MASHAEL. QVideoWidget vs QGraphicsVideoItem. 2017. Qt Forum. Disponível

em: <https://forum.qt.io/topic/81248/qvideowidget-vs-qgraphicsvideoitem>. Acesso em:

15 de mar. 2021.

ZIRAWAGA, V. S.; OLUSANYA, A. I.; MADUKU, T. Gaming in education: Using games

as a support tool to teach history. Journal of Education and Practice, Faculty of Applied

Science, Cyprus International University, Nicosia, Turkey, v. 8, n. 15, p. 55–64, 2017.

Disponível em: <https://iiste.org/Journals/index.php/JEP/article/view/37034>.